常用的些操作

1,获取body元素

  var bodyObj = document.getElementsByTagName("body")[0];

  var bodyObj = document.body;        注意:尽量不要dom的body属性直接获取《body》直接访问,对浏览器支持不太好。

2,innerHTML  innerText outerHTML 区别

  innerHTML    包含html代码

  innerText    只含有文字

  outerHTML  包含本身及html代码

例子:

1 <div id="test">
2    <span style="color:red">test1</span> test2
3 </div>
4 
5 <a href="JavaScript:alert(test.innerHTML)">innerHTML内容</a>
6 <a href="javascript:alert(test.innerText)">inerHTML内容</a>
7 <a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

注意尽量使用innerHTML,innerText支持不是太好(好像只支持ie)

如果想用innerHTMl获取文本,可以使用一下代码(下获取整个html代码,再用正则表达式去除html标签)

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

加下东西

  1 document.getElementById("demo").innerHTML="My First JavaScript Function"; 修改值
1 document.getElementById("demo").innerHTML;获取值

3,通过js修改样式style

  方法一 使用obj.className来修改样式表的类名

   div1.style.backgroundColor = "red";

  方法二、使用obj.style.cssTest来修改嵌入式的css

    div1.style.cssText = "width:100%; height:100%; position: absolute;text-align: center";

    div1.style.cssText = "background-color:black; display:block;color:White;";

  方法三、使用obj.className来修改样式表的类名

   div1.setAttribute('style' , 'width:100%; height:100%; position: absolute;text-align: center')

   div1.className = "style2";

1 <style type="text/css">
2          .style2{
3             position: absolute;
4             width: 100%;
5             height: 100%;
6             text-align: center;
7         }
9 </style>

  方法四、使用更改外联的css文件,从而改变元素的css

1 <link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
2  div1.setAttribute("href","css1.css");

 

 

 

 

  

 

  

 

posted @ 2017-03-01 22:31  赞恩_abc  阅读(172)  评论(0编辑  收藏  举报