您的位置:首页 > Web前端 > JavaScript

关于javascript操作html

2012-04-03 15:50 211 查看
/**
 * 这里我们简单介绍一下使用javascript操作html元素
 * 我们可以通过document.getElementById("998");获取一个网页上的元素
 */

window.onload=init;
function init(){
	var btn=document.getElementById("998"); //获取一个按钮
	var img=document.getElementById("img1");//获取一个图片
	img.src="js/c.jpg";  //使用代码设置图片的src 类似<img id='img1' src='js/c.jpg'/>
	img.title="图片翻转"; //直接使用字符串赋值
	img.className="hide";
	alert(img.onclick);//可以查看html生成的信息
	img.onclick=onclick; //属性和事件是不一样的设置方法,需要赋值一个函数
	img.onmouseover=onmouseover;
	img.onmouseout=onmouseout;
	
	btn.innerHTML="显示图片";
	btn.onclick=btn_click;
	
}

function onclick(event) {
    alert(1234);   
}

function onmouseover(event) {
    this.src = "js/b.jpg";//千万要记得加上this 否则src默认为windows对象的属性 ,起不了任何作用
}

function onmouseout(event) {
    this.src = "js/c.jpg";//对于属性值需要明确指定,就像java中的this指针一样。属性依赖于对象而存在。同样,这个方法也是依赖于对象而存在的
}

function btn_click(){//对于事件方法不能传递参数,貌似。所有我们可以使用this调用当前对象。对于其他元素需要获取
	if("显示图片"==this.innerHTML){
		var img=document.getElementById("img1"); //如果需要使用其他的元素的话,我们可以获取,
		img.className="show";
		this.innerHTML="隐藏图片";
	}else if("隐藏图片"==this.innerHTML){
		var img=document.getElementById("img1");
		img.className="hide";
		this.innerHTML="显示图片";
	}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: