JS DOM操作 Window.docunment对象——操作属性
Posted 酒不醉心
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS DOM操作 Window.docunment对象——操作属性相关的知识，希望对你有一定的参考价值。
1、属性
是对象的性质与对象之间关系的统称。html中标签可以拥有属性，属性为 HTML 元素提供附加信。
属性总是以名称/值对的形式出现，比如：name="value"。
属性值始终被包括在引号内。双引号是最常用的，在某些个别的情况下，比如属性值本身就含有双引号，必须使用单引号，
属性总是在 HTML 元素的开始标签中规定。
2、属性实例
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"> 拥有关于表格边框的附加信息。
3、对属性的操作
（1）通过定位找到该元素存于变量中
var a = document.getElementById("id")
（2）对该元素的属性进行操作
a.setAttribute( “ 属性名”，“属性值” )； // 添加更改属性
a.getAttribute( " 属性名 " ); // 获取属性的值
a.removeAttribute( " 属性名 " ); //移除属性
最新的属性会覆盖原来的属性不会出现2个相同的属性, 直接用 属性名=属性值 就能给属性修改，给属性赋值
上代码示例
例1、建2个按钮，点击第一个按钮，按钮本身变为不可用，点击第二个按钮第一个按钮变为可用
<head>
<title></title>
</head>
<body>
<input type ="button" value ="第一个按钮" class="c1" />
<input type ="button" value ="第二个按钮" class="c1" />
</body>
</html>
<script type="text/javascript">
var a = document.getElementsByClassName("c1")
a[0].onclick = function () {
a[0].setAttribute("disabled","disabled") // disable="disable" 不可用
}
a[1].onclick = function () {
a[0].removeAttribute("disabled")
}
</script>
例 2、 做一个问题，输入答案如果正确弹出正确，错误弹出错误
<head>
<title></title>
</head>
<body>
5+5=
<input type ="text" class="c1"/>
<input type ="button" value ="验证" " da="10" class="c1"/>
</body>
</html>
<script type ="text/javascript">
var a = document.getElementsByClassName("c1");
a[1].onclick = function () {
var c = a[0].value;
var d = a[1].getAttribute("da");
if (d == c)
alert("正确");
else
alert("笨蛋！！！");
}
</script>
效果
例3、建按钮与有背景色的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>
效果图
以上是关于JS DOM操作 Window.docunment对象——操作属性的主要内容，如果未能解决你的问题，请参考以下文章