Example013操作样式

时间：2022-04-27 05:31:24
<!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>

　　

相关文章