javascript之DOM技術（二）

時間 2019-12-28

原文原文鏈接

全文連接
一。樣式編程
1.頁面中的每個元素都具備一個style對象，此對象管理元素的CSS樣式。這是在IE4.0引入的，後來做爲DOM標準被接受。使用方法:
var oDiv=document.getElementById("div1");
alert(oDiv.style.backgroundColor);
style對象擁有一個cssText屬性，返回描述元素樣式的CSS字符串。

2.樣式對象style的方法（IE6並不支持這些方法）：
（1）getPropertyValue(propertyName)——返回CSS特性propertName的字符串值，好比this.style.getPropertyValue("background-color");這裏的propertyName必須按照CSS的樣式定義。

（2）getPropertyPriority()——返回important字符串或者爲空
（3）item(index)——返回給定索引處的CSS特性名稱
（4）removeProperty(propertyName)——移除某CSS特性
（5）setProperty(propertyName,value,priorty)——按照執行優先級設定CSS特性的值

3.經過隱藏層實現自定義鼠標提示的例子：
javascript

<html>
    <head>
        <title>Style Example</title>
          <script type="text/javascript" src="detect.js"></script>
        <script type="text/javascript" src="eventutil.js"></script>
        <script type="text/javascript">
            function showTip() {
                var oDiv = document.getElementById("divTip1");
                oDiv.style.visibility = "visible";
                var oEvent=EventUtil.getEvent();
                oDiv.style.left = oEvent.clientX + 5;
                oDiv.style.top = oEvent.clientY + 5;
            }

            function hideTip() {
                var oDiv = document.getElementById("divTip1");
                var oEvent=EventUtil.getEvent();
                oDiv.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()" onmouseout="hideTip()"></div>

         <div id="divTip1"
              style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
            <span style="font-weight: bold">Custom Tooltip</span><br />
            More details can go here.
         </div>
    </body>
</html>
css

這裏使用了我在《javascript事件模型框架》中摘記的JS文件。實現可摺疊區域的道理與此相同，很經常使用的功能，再也不細說。

4.訪問樣式表，由於style對象只能訪問一個元素的CSS樣式，而對於<style/>定義的或者外部CSS文件定義的CSS規則沒辦法訪問，這就引出瞭如何訪問樣式表的問題。咱們能夠經過下面的方式訪問：
html

var c***ules=document.styleSheets[0].c***ules||document.styleSheets[0].rules;java

document.styleSheets返回頁面上全部樣式表的引用，標準DOM中規定每一個樣式表的規則集合叫c***ules，而IE中叫rules，因此咱們用上面的表達式來處理瀏覽器兼容問題。一個訪問的例子：
編程

<html>
    <head>
        <title>Accessing Style Sheets Example</title>
        <style type="text/css">
            div.special {
                background-color: red;
                height: 10px;
                width: 10px;
                margin: 10px;
            }
        </style>
        <script type="text/javascript">
            function changeBackgroundColor() {
                var oC×××ules = document.styleSheets[0].c***ules || document.styleSheets[0].rules;
                oC×××ules[0].style.backgroundColor = "blue";
            }
        </script>
    </head>
    <body>
        <div id="div1" class="special"></div>
        <div id="div2" class="special"></div>
        <div id="div3" class="special"></div>

        <input type="button" value="Change Background Color" onclick="changeBackgroundColor()" />
    </body>
</html>
瀏覽器

點擊按鈕時將三個div的背景色都設置爲藍色。

5.最終樣式：顧名思義，就是樣式規則（外部定義和內聯的）綜合計算以後呈現給用戶的樣式信息，用來告訴咱們元素最終是如何顯示在屏幕上的。IE和標準的DOM也有區別：
（1）IE中的最終樣式稱爲currentStyle對象，與style對象不一樣的是它是隻讀的，你只能讀而不能給它賦值。
（2）DOM中的最終樣式，經過document.defaultView.getComputedStyle(元素對象,僞元素對象或者null)方法得到

二。innerHTML和innerText
很經常使用的功能，特別是在AJAX應用中，常常採用的手段是從服務端返回一小段HTML代碼，經過innerHTML嵌入某個層當中來動態顯示下拉框等。一個比較常見的用法：
oDiv.innertText=oDiv.innerText;
表示從指定元素中刪除全部的HTML標籤。框架

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。