正文
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>
