属性：是对象的性质与对象之间关系的统称。HTML中标签可以拥有属性，属性为 HTML 元素提供附加信。
属性总是以名称/值对的形式出现，比如：name="value"。
属性值始终被包括在引号内。双引号是最常用的，在某些个别的情况下，比如属性值本身就含有双引号，必须使用单引号，
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
< a href="http://www.baidu.com"> a </a>
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table> 定义 HTML 表格。
<table border="1"> 拥有关于表格边框的附加信息。
对属性的操作
1、通过定位找到该元素存与变量中
var a = document.getElementById("id")
2、对该元素的属性进行操作
a.setAttribute( “ 属性名”，“属性值” )；
-- 添加更改属性
a.getAttribute( " 属性名 " );
-- 获取属性的值
a.removeAttribute( " 属性名 " );
-- 移除属性
-- 最新的属性会覆盖原来的属性不会出现2个相同的属性
例题
建按钮与有背景色的div，点击按钮背景色改变
<head>
<title></title>
<style type="text/css">
.div {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<input type="button" value="验证" id="btn1" /><br />
<div class="div" aa="1"></div>
<div class="div" aa="1"></div>
<div class="div" aa="0"></div>
<div class="div" aa="0"></div>
<div class="div"></div>
<div class="div"></div>
</body>
</html>
<script type="text/javascript">
document.getElementById(‘btn1‘).onclick = function () {
var oDivs = document.getElementsByClassName(‘div‘);
for (var i = 0; i < oDivs.length; i++) {
if (oDivs[i].getAttribute(‘aa‘) == ‘1‘)
oDivs[i].style.backgroundColor = "blue";
if (oDivs[i].getAttribute(‘aa‘) == ‘0‘)
oDivs[i].style.backgroundColor = "green";
}
}
</script>
效果图
时间： 2024-11-01 18:57:00