首页 > 代码库 > JS控制css

JS控制css

<style>
#div1 {position:absolute;left:20px;top:30px;width:20px;height:30px;background-color:red}
.red{color: red}
.blue{color: blue}
</style>
		<script>	
			var d = 100;
			function test() {
				var a = document.getElementById("div1");
				a.style.backgroundColor = "blue";
				d += 10;
				a.style.left = d+"px";
				 	
			  
			}
		</script>
		<script>	
			var d = 100;
			function test1() {
				var a = document.getElementById("div1");
				a.style.backgroundColor = "blue";
				d += 10;
				a.style.left = d+"px";
				 	
			  
			}
			function test2() {
			  var a = document.getElementById("div0");
			  a.className =  "blue";//样式的装换
			}
		</script>
	
	<body onkeypress="ff(event)">
		<!-- <input type="button" value="http://www.mamicode.com/测试" onclick="ff(event)"> -->
		<div id = div0 class = "red">aaaa</div>
		<div id =  div1>
		</div>
		<input type="button" value="http://www.mamicode.com/测试1" onclick="test1()">
		<input type="button" value="http://www.mamicode.com/测试2" onclick="test2()">
		
	</body>