获取页面的元素属性,就可以对页面的属性进行操作,属性的操作包括属性的读和写
操作属性的方法
1."."操作
<!DOCTYPE html>
<html>
<head>
<meta id="we" charset="utf-8">
<title></title>
<style type="text/css">
.box{
font-size: 20px;
color: #00FFFF;
}
.box2{
font-size: 30px;
color: pink;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1') //获取标签id号
var oA = document.getElementById('link')
var oDiv2 = document.getElementById("div2")
//读取属性
var sID = oDiv.id
//alert(sID) //弹出弹窗
//写属性
oDiv.style.color = "red";
oA.href = "http://www.baidu.com";
oA.title = "这是去到百度的链接"
oDiv2.className = "box2"
}
</script>
</head>
<body>
<div id="div1">
<p>这是一个DIV元素</p>
</div>
<a href="#" id="link">这是一个链接</a>
<div id="div2" class="box">
这是第二个DIV
</div>
</body>
</html>
- "[ ]"操作
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
var sMystyle = 'color';
var sValue = 'red';
/*
这一句不起作用
oDiv.style.sMystyle = sValue;
*/
//属性用变量来代替的话需要用中括号 []来操作
oDiv.style[sMystyle] = sValue;
}
</script>
</head>
<body>
<div id="div1">DIV元素</div>
</body>
</html>