javascript-对文档对象的内容、属性、样式的操作
一、操作内容
1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签)
2. innerText 用来设置或获取对象起始和结束标签内的内容 (兼容IE,获取文本)
textContent用来设置或获取对象起始和结束标签内的内容 (兼容FF,获取文本)
注意区别innerHTML和innerText,第一个会识别样式,第二个只会识别文本
但是在FF中不兼容,要使用textContent,以下是兼容函数
支持document.all的是IE
function getContent (objs,val) { if(document.all){ if(val){ objs.innerText=val }else{ return objs.innerText } }else{ if(val){ objs.textContent=val }else{ return objs.textContent } } } window.onload=function () { var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); var but=document.getElementById("but"); but.onclick=function () { //var contents=div1.innerHTML; //div2.innerHTML=contents; var contents=getContent(div1) getContent(div2,contents); } }
<div class="one" id="div1"> <h3> 欢迎收看后盾网视频教程,收看高清版请登录后盾网论坛! </h3> </div> <input type="button" value="↓↓" id="but" > <div class="two" id="div2"> </div>
3. outerHTML 用来设置或获取包括本对象在内起始和结束标签内的内容(识别html标签)
outerText 用来设置或获取包括本对象在内起始和结束标签内的内容
二、操作属性
1.直接操作
对象.属性
对象.属性=值 (设置、获取、添加属性(属性值))
2.获取和设置
getAttribute("属性") 获取给定的属性的值
setAttribute("属性","值") 设置或是添加属性
window.οnlοad=function () { var links=document.getElementsByTagName("a")[0]; //alert(links.href) //links.href="2.html"; //alert(links.title) //links.title="后盾网"; //links.title="后盾网"; //getAttribute("属性") 获取给定的属性的值 // setAttribute("属性","值") 设置或是添加属性 alert(links.getAttribute("href")) links.setAttribute("href","2.html") }
三、操作样式
1.行内样式
对象.style.属性
对象.style.属性=值 (设置、获取、添加属性)
window.οnlοad=function () { var one=document.getElementById("one"); one.onmouseover=function () { //alert(one.style.color) one.style.color="blue"; one.style.backgroundColor="red"; one.style.fontSize="13px"; } one.onmouseout=function () { one.style.color="red"; one.style.backgroundColor="blue"; one.style.fontSize="11px"; } }
<a href="#" style="color:red;background-color:blue;padding:3px" id="one">链接</a>
****************************************************
遇到属性是"-"链接的,要将"-"去掉,后面的单词的首字母大写
****************************************************
2.css层叠样式
1>通过更改ID来更改样式(一般不用,不更改ID)
<style> #one{ width:200px; height:200px; border:1px solid red; color:red; font-size:14px; padding:24px; } #two{ width:200px; height:200px; border:1px solid blue; color:blue; font-size:19px; padding:15px; } </style> <script> window.onload=function () { var one=document.getElementById("one"); var but=document.getElementById("but"); but.onclick=function () { one.id="two"; } } </script>
<div id="one" class="div1"> 欢迎收看后盾网视频教程,下载高清版请到后盾网论坛下载,bbs.houdunwang.con; </div> <input type="button" value="更改样式" id="but">
2>通过className更改样式
<style> .div1{ height:200px; border:1px solid red; color:red; font-size:14px; padding:24px; } .div2{ width:200px; height:200px; border:1px solid blue; color:blue; font-size:19px; padding:15px; } </style>
window.οnlοad=function () { var one=document.getElementById("one"); var but=document.getElementById("but"); but.onclick=function () { one.className="div2"; } }
<div id="one" class="div1" style="width:200px"> 欢迎收看后盾网视频教程,下载高清版请到后盾网论坛下载,bbs.houdunwang.con; </div> <input type="button" value="更改样式" id="but">
*******************************************
适合批量更改
*******************************************
3>更改或者获取或者设置某个属性的值
**************************************************************
document.styleSheets[下标].rules[下标].style.属性
document.styleSheets[下标].rules[下标].style.属性=值
document.styleSheets 样式表的集合,即是<style></style>的数量
document.styleSheets[0].rules 样式规则的列表,即其中的<div>等的个数
document.styleSheets[0].rules.style 样式规则的集合
document.styleSheets[下标].rules[下标].style.属性
alert(document.styleSheets[0].rules[0].style.width)
适用于IE
**************************************************************
**************************************************************
document.styleSheets[下标].cssRules[下标].style.属性
document.styleSheets[下标].cssRules[下标].style.属性=值
适用于FF
***************************************************************
4> 动态的添加删除css样式规则
document.styleSheets[下标].insertRule("选择器{属性:值}",位置) FF w3c
deleteRule(位置) FF w3c
document.styleSheets[下标].addRule("选择器","属性:值",位置) IE removeRule(位置) IE
//document.styleSheets[0].addRule(".div1","margin:200px",0); //document.styleSheets[0].removeRule(1);
3.行内样式和css层叠样式通用的方式
对象.currentStyle.属性 IE 用来获得实际的样式属性
getComputedStyle(对象,null) FF 用来获得实际的样式属性
//对象.currentStyle.属性 IE 用来获得实际的样式属性 //getComputedStyle(对象,null) FF 用来获得实际的样式属性 //alert(one.currentStyle.width) alert(getComputedStyle(one,null).width)
*******************************
只能获取不能设置
*******************************