js操作属性

js操作属性

DOM是为了操作文档（网页）的API，document是它的一个对象
整个文档加载完之后执行一个匿名函数：window.onload

修改下面div中的title元素
window.onload = function(){
	document.getElementById('div1').title = "我看到了！";
} //调用document.getElementById（）括号里添加要修改的id

<div id="div1" class="div1" title="这是div元素，看到了吗？">这是一个div元素</div>

修改a标签
定义一个变量oA，可以用oA直接调用那一段代码

var oA = document.getElementById('link1');
	oA.href = "http://www.tencent.com";
	oA.title = "跳转到腾讯网"


<a href="#" id="link1">腾讯网</a>

js换肤

<link rel="stylesheet" type="text/css" href="css/1.css" id="link1">

通过js修改link的不同css文件达到换肤的效果
window.onload = function(){
	var oLink = document.getElementById('link1');
	oLink.href = "css/1.css";
	}

js操作style属性

window.onload = function() {
	var oDiv = document.getElementById('div1'); //定义一个oDIV的变量
	//用变量名调用上边的代码
	oDiv.style.color = 'red'; //修改文字的颜色
	oDiv.style.background = 'gold';  //修改背景颜色
	oDiv.style.fontSize = '30px'; //修改字号
	//style属性中的样式属性，带"-"号的需要去掉"-"号，
	//写成小驼峰式，例如：font-size属性要写为fontSize

<div id="div1">这是一个div元素</div>

js操作class

window.onload = function() {
	var oDiv = document.getElementById('div1');
	// 由于class是js中的保留关键字，所以设置class属性时，要写为className
	oDiv.className = 'box02';
	}

js中括号操作属性

window.onload = function(){
	var oDiv = document.getElementById('div1');
	
	//oDiv.style.color = 'red';//red必须加引号，否则会认为它是一个变量，引起来会认为它是一个值，赋值给=号左边
	
	var attr = 'color';
	// oDiv.style[attr] = 'red';
	/* 通过[]操作属性可以写变量 */
	
	oDiv['style'][attr] = 'red';
	/* 通过innerHTML可以读写元素包括的内容 */
	alert(oDiv.innerHTML);//读取标签里面包裹的元素，即“这是一个div元素”

	var oDiv2 = document.getElementById('div2');
	// oDiv2.innerHTML = '这是第二个div元素';//向div标签中插入内容
	oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度网</a>";//向div标签中插入超链接标签

	/*
	document.write和innerHTML的区别
	document.write只能重绘整个页面
	innerHTML可以重绘页面的一部分
	*/
}

js函数

function 函数名（）{

}//定义一个函数

//直接调用：函数名();

function aa(){
			alert('hello!');
		} //定义一个aa弹框函数

<input type="button" name="" value="弹框" onclick="aa()" />
	//在input标签中设置一个按钮调用函数

js可控制换肤

<script type="text/javascript">
		window.onload = function(){
			/* 提取行间事件 */
			var oBtn01 = document.getElementById('btn01');
			var oBtn02 = document.getElementById('btn02');

			oBtn01.onclick = skin01;
			//这里不能写skin01()，这样写就马上执行了
			oBtn02.onclick = skin02;
		}
		function skin01(){
			var oLink = document.getElementById('link1');
			oLink.href = "css/1.css";
		}
		function skin02(){
			var oLink = document.getElementById('link1');
			oLink.href = "css/2.css";
		}
	</script>



	<input type="button" name="" value="皮肤01" id="btn01" />
	//定义第一个皮肤的按钮
	<input type="button" name="" value="皮肤02" id="btn02" />
	//定义第二个皮肤的按钮
	
	<div class="box01"></div>
	<div class="box02"></div>
	//定义两个盒子