Example013操作样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实例013操作样式</title>
	<style>
		.hello {
			background-color: red;
			font-size: 2cm;
			color: green;
		}
		.hi {
			background-color: pink;
			font-size: 3cm;
			color: yellow;
		}
		.world {
			border:3px solid yellow;
		}
	</style>
</head>
<body>
	<!-- 可以获取样式, 也可以改样式
		一、 可以一个一个样式的改
			对象.style.样式属性=“样式的值”
			样式属性如果有"-"的, 将这个去了, 后面的单词首字母大写

		二、 可以批量的改样式	
			使用className这个通用属性(所有元素都可以使用的属性)
			清除样式将className设置为空 -->
	<a id="test1" href="http://www.baidu.com/">百度</a><br>
	<a id="test2" href="http://www.baidu.com/">百度</a><br>
	<a class="hello" id="test3" href="http://www.baidu.com/">百度</a><br>
	<a class="hello" id="test4" href="http://www.baidu.com/">百度</a><br>
	<a class="hello" id="test5" href="http://www.baidu.com/">百度</a><br>

	<input type="button" onclick="change1()" value="改样式1"><br>
	<input type="button" onclick="change2()" value="改样式2"><br>
	<input type="button" onclick="change3()" value="改样式3"><br>
	<input type="button" onclick="change4()" value="改样式4"><br>
	<input type="button" onclick="change5()" value="改样式5"><br>
	<script>
		
		function change1() {
			var obj = document.getElementById("test1");
			obj.style.color="yellow";
			//样式属性中如果有“——”,将他装换成后面的单词首字母大写
			obj.style.backgroundColor="black";
			obj.style.fontSize="2cm";
		}
		var x = 5;
		var y =5;
		function change2() {
			//点击一下在屏幕中移动一次
			var obj = document.getElementById("test2");
			x += 10;
			y += 10;
			obj.style.position="absolute";
			obj.style.backgroundColor="green";
			obj.style.fontSize="3cm";
			obj.style.left=x+"px";
			obj.style.top=y+"px";
		}
		function change3() {
			//点击切换样式
			var obj = document.getElementById("test3");
			if(obj.className=="hello"){
				obj.className="hi";
			}else {
				obj.className="hello";
			}
		}
		function change4() {
			//清除所有样式
			var obj = document.getElementById("test4");
			obj.className="";
		}
		function change5() {
			//添加样式 
			var obj = document.getElementById("test5");
			obj.className+=" world";//注意空格!!!!!!!!!!!!!!!!!
		}
	</script>
</body>
</html>

  

posted @ 2016-04-08 17:32  HandsomeHan  阅读(182)  评论(0编辑  收藏  举报