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
自己找資料參考，用的不多