首頁 > 開發者 > JavaScript

JavaScript駕馭網頁-CSS與DOM，javascript-cssdom

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

JavaScript駕馭網頁-CSS與DOM，javascript-cssdom

推薦閱讀：JavaScript駕馭網頁－DOM

DOM是種符合全球資訊網標準的HTML操縱方式，它能比innerHTML特性達成更多操控功能

這裡有HTML代碼與CSS代碼

<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style type="text/css">span.class1{background-color:#DDDDDD;}span.class2{background-color:#221717;}</style></head><body><span id="span1" class="class1">Start Game</span><span id="span2" class="class2">Start Game</span></body></html>

藉由改變節點的整份樣式類，className節點特性達成戲劇性的樣式變化

DOM透過節點屬性的className特性，提供對元素樣式類的訪問 

alert(document.getElementById(“span1”).className);

通過更改CSS樣式類的名稱，完成對元素外觀的轉變 

document.getElementById(“span1”).className=”class2”;//將span1的樣式換成span2的樣式

同理，我們也可以在這裡用onmouseover()與onmouseout()事件對元素的樣式加以控制

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'">

雖然這種效果一般用CSS來加以控制，不過，這裡只注重對這些工具的應用，大家觸類旁通即可

CSS樣式類與Javascript類完全無關——它們是完全不同的東西

藉由訪問節點的單一樣式特性，style節點特性達成少量樣式變化

節點的Style特性提供對單一樣式特性的訪問

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'" style=" visibility:hidden">

style=” visibility:hidden”指示元素隱藏

網頁元素可以利用元素對象的visibility 樣式特性做動態顯示或隱藏（display:none/display:block 同樣可以完成對元素的隱藏與顯示）

DOM能隨意建立任何HTML元素，當然包括文本段落

document.createElement()用於建立一個HTML標籤，參數是標籤名

document.createElement(“p”)建立一個p標籤

另：document.createTextNode()用於建立文本段落，參數是常值內容

var pElem=document.createElement(“p”);//建立一個P標籤

pElem.appendChild(document.createTextNode(“Hello WeAreZero!”));//為P標籤添加子項目 文本

document.getElementById(“span1”).appendChild(pElem);//將P標籤以及其子項目添加到span1標籤下

附錄：

利用document對象的createElement()方法，能夠建立任何HTML元素

若需新增元素的常值內容，必須建立一個常值內容子項目，並附加至元素下

藉由小心地新增與移除DOM樹上的節點，網頁可以隨意拆解與重組

JavaScript駕馭網頁-CSS與DOM的介紹就到這裡，希望對大家有所協助！

您可能感興趣的文章:
  • 純JS實現根據CSS的class選擇DOM
  • JS、CSS以及img對DOMContentLoaded事件的影響

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More