JS——操作属性
Posted 微雨11
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS——操作属性相关的知识，希望对你有一定的参考价值。
操作属性：
对象.setAttribute(‘属性名‘,‘值‘); - 添加属性
对象.getAttribute(‘属性名‘); - 获取属性值，如无此属性，那么返回null
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .div1 { width: 100px; height: 50px; float: left; margin-right: 10px; } </style> </head> <body> <div class="div1" dd="1"></div> <div class="div1" dd="1"></div> <div class="div1" dd="0"></div> <div class="div1" dd="0"></div> <div class="div1"></div> <div class="div1"></div> </body> </html> <script type="text/javascript"> var aa = document.getElementsByClassName("div1"); for (var i = 0; i < aa.length; i++) { if (aa[i].getAttribute("dd") == "1") aa[i].style.backgroundColor = "green"; else if (aa[i].getAttribute("dd") == "0") aa[i].style.backgroundColor = "yellow"; else aa[i].style.backgroundColor = "red"; } </script>
对象.removeAttribute(‘属性名‘); - 移除属性
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <input type="button" value="按钮111" id="dd1" /> <input type="button" value="按钮222" id="dd2" /> </body> </html> <script type="text/javascript"> var aaa = document.getElementById("dd1"); var bbb = document.getElementById("dd2"); //按钮111的点击事件 aaa.onclick = function () { //按钮111添加一个属性不可用 this.setAttribute("disabled", "disabled"); //获取aaa中属性value的值 var ccc = this.getAttribute("value"); alert(ccc); } //bbb的点击事件 bbb.onclick = function () { //移除aaa的disabled属性 aaa.removeAttribute("disabled"); } </script>
2.验证5+5=？
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> 5+5= <input type="text" id="dd1" data="10" /> <input type="button" id="dd2" value="验证"/> </body> </html> <script type="text/javascript"> var aaa = document.getElementById("dd1"); var bbb = document.getElementById("dd2"); //按钮111的点击事件 //bbb的点击事件 bbb.onclick = function () { var txt = aaa.getAttribute("data"); if (txt == aaa.value) alert("正确"); else alert("笨蛋"); } </script>
定时器：
window.setTimeout(function(){},间隔时间毫秒);
- 定时炸弹，延迟执行，只执行一次
window.setInterval(function(){},间隔的时间毫秒);
- 无限循环，每一次循环有间隔时间，一般不要小于20毫秒
- 它是有返回值的，可以用一个变量来接收这个定时器对象
window.clearInterval(要关闭的定时器对象);
一旦执行这句代码，会立刻停止此定时器对象的执行
对象.offsetWidth
以上是关于JS——操作属性的主要内容，如果未能解决你的问题，请参考以下文章
谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js