javascript-DOM(3)
1、元素属性操作
a、oDiv.style.display = "block";
b、oDiv.style["display"] = "block";
c、DOM方式
DOM方式操作元素属性
1）获取：getAttribute(名称)
2）设置：setAttribute(名称，值)
3）删除：removeAttribute(名称)
代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function (){ 8 9 var oInp = document.getElementById('text1'); 10 11 //oInp.value = '123';//第一种方法 12 oInp['value'] = '456';//第二种方法 13 14 } 15 </script> 16 </head> 17 18 <body> 19 <input id="text1" type="text" /> 20 </body> 21 </html>
运行效果：
代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function (){ 8 9 var oInp = document.getElementById('text1'); 10 11 oInp.setAttribute('value','789');//设置属性 12 13 alert(oInp.getAttribute('id')); //获取属性
//oInp.removeAttribute('value');删除属性
14 } 15 </script> 16 </head> 17 18 <body> 19 <input id="text1" type="text" /> 20 </body> 21 </html>
运行效果：
2、用className来选取元素
改变class为box的li元素的背景颜色
代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function (){ 8 var oUl = document.getElementById('ul1'); 9 var oLi = oUl.getElementsByTagName('li'); 10 11 for(var i=0;i<oLi.length;i++){ 12 if(oLi[i].className == 'box'){ 13 oLi[i].style.background ='green'; 14 } 15 } 16 17 } 18 </script> 19 </head> 20 21 <body> 22 <ul id="ul1"> 23 <li>aaaaaa</li> 24 <li>bbbbbb</li> 25 <li class="box">cccccc</li> 26 <li>dddddd</li> 27 <li class="box">eeeeee</li> 28 <li>ffffff</li> 29 <li class="box">gggggg</li> 30 <li>hhhhhh</li> 31 </ul> 32 </body> 33 </html>
运行效果：
