1.内联样式:(直接通过HTML的style特性来分配的样式)
Dom采用style对象来管理元素的CSS样式。
将<div/>的CSS border特性更改为"1px solid black"
var oDiv = document.getElementById("div1");
oDiv.style.border = "1px solid black";
下面的页面当点击按钮时,显示它们的背景色
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function sayStyle(){
var oDiv = document.getElementById("div1");
alert(oDiv.style.backgroundColor);
}
</script>
</head>
<body>
<div id="div1" style="background-color:red;height:50px;width:50px"></div><br/>
<input type="button" value="Get Background Color" onclick="sayStyle()"/>
</body>
</html>
将鼠标移动到<div/>上时它变成蓝色，当把鼠标移走时它变回红色
<html>
<head>
<title>Style Example</title>
</head>
<body>
<div id="div1" style="background-color:red; height:50px;width:50px"
onmouseover="this.style.backgroundColor='blue'"
onmouseout="this.style.backgroundColor='red'"></div>
</body>
</html>
自定义鼠标提示
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function showTip(oEvent){
var oDivTip = document.getElementById("divTip");
oDivTip.style.visibility = "visible";
oDivTip.style.left="oEvent.clientX + 5";
oDivTip.style.top="oEvent.clientY + 5";
}
function hideTip(oEvent){
var oDivTip = document.getElementById("divTip");
oDivTip.style.visibility = "hidden";
}
</script>
</head>
<body>
<p>Move your mouse over the red square.</p>
<div id="div1" style="background-color:red; height:50px; width:50px"
onmouseover="showTip(event)"
onmouseout="hideTip(event)"></div>
<div id="divTip" sytle="background-color:yellw; position:absolute; visibility:hidden; padding:5px">
<span style="font-weight: bold">Custom Tooltip</span><br/>
More details can go here.
</div>
</body>
</html>
可折叠区域
可折叠区域有个标题栏,这部分总是可见的,还有个内容区域，这部分可以折叠或展开
<html>
<head>
<title>Sytle Example</title>
<script type="text/javascript">
function toggle(divContent){
var oDiv = document.getElementById(divContent);
oDiv.style.display == (oDiv.style.display == "none") ? "block":"none";
}
</script>
</head>
<body>
<div style="background-color:blue; color:white; font-weigth:bold; padding:10px; cursor:pointer"
onclick="toggle('divContent1')">点击这</div>
<div style="border:3px solid blue; height:100px; padding:10px"
id="divContent1">这里是显示或隐藏的内容.</div>
<p> </p>
<div style="background-color:blue; color:white; font-weigth:bold; padding:10px; cursor:pointer"
onclick="toggle('divContent2')">点击这</div>
<div style="border:3px solid blue; height:100px; padding:10px"
id="divContent2">这里是显示或隐藏的内容.</div>
</body>
</html>
当display设置为none时,元素就被从页面中移除,页面重绘时就如同无这元素的存在.
这与将visibility设置为hidden不同,它仅仅隐藏元素,留下一个元素所占的区域的空白.
2.访问样式表
使用style对象可以方便地获取某个有style特性的元素的CSS样式。但它无法表示由CSS
规则或在style特性外部定义类所定义的元素CSS样式。
获取定义类的样式表的引用,可以用document.styleSheets集合来实现这个目的,
这个集合包含了HTML页面中所有样式表的引用,包含了所有<style/>元素.
DOM为每个样式表指定一个rules集合,它包含所有的定义在样式表中的CSS规则
如下使用CSS规则的style对象来报告正确的背景色,而不是使用<div/>本身的style对象:
<html>
<head>
<title>Style Example</title>
<style type="text/css">
div.special{
background-color:red;
height:10px;
width:10px;
margin:10px;
}
</style>
<script type="text/javascript">
function getBackgroundColor(){
//获取第一个<style/>元素的引用
var styleSheet = document.styleSheets[0];
//获取此<style/>元素的第一个CSS规则内容的引用
var cssRule = styleSheet.rules[0];
alert(cssRule.style.backgroundColor);
}
</script>
</head>
<body>
<div id="div1" class="special"></div><br/>
<input type="button" value="获取背景色" onclick="getBackgroundColor()"/>
</body>
</html>
当点击按钮时,警告框将根据div.special的规则正确显示出背景色。
修改CSS的规则会影响到页面上所有使用它的元素,所以如果修改，一般修改单独元素的style对象而不更改CSS规则
3.IE中的最终样式:
微软为每个元素提供一个currentStyle对象,它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性
<html>
</html>
综上所述
用IE浏览器的开发员记住：
不管样式是在HTML里定义还是在CSS规则里定义的.
只要访问元素的特性,都使用currentStyle对象。
只要修改元素的特性,都用style对象。
4.innerText和innerHTML
IE为所有元素引入了这2个特性
如果元素只包含文本，那么innerText和innerHTML返回相同的内容.
如果元素同事包含内容和其他元素，那么innerText将只返回文本的表示，而innerTHML将返回所有的元素和文本的HTML代码。
outerText和outerHTML
自己找资料参考，用的不多