国产gaysexchina男同gay,japanrcep老熟妇乱子伦视频,吃奶呻吟打开双腿做受动态图,成人色网站,国产av一区二区三区最新精品

（24）JavaScript與DOM（下）

2018-02-24 15:25 更新

介紹

上一章我們介紹了JavaScript的基本內(nèi)容和DOM對象的各個方面，包括如何訪問node節(jié)點。本章我們將講解如何通過DOM操作元素并且討論瀏覽器事件模型。

本文參考：http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-lesson-2/

操作元素

上一章節(jié)我們提到了DOM節(jié)點集合或單個節(jié)點的訪問步驟，每個DOM節(jié)點都包括一個屬性集合，大多數(shù)的屬性都提供為相應的功能提供了抽象。例如，如果有一個帶有ID屬性intro的文本元素，你可以很容易地通過DOM API來改變該元素的顏色：

document.getElementById('intro').style.color = '#FF0000';

為了理解這個API的功能，我們一步一步分開來看就非常容易理解了：

var myDocument = document;  
var myIntro = myDocument.getElementById('intro');  
var myIntroStyles = myIntro.style;  

// 現(xiàn)在，我們可以設置顏色了: 
myIntroStyles.color = '#FF0000';

現(xiàn)在，我們有了該文本的style對象的引用了，所以我們可以添加其它的CSS樣式：

myIntroStyles.padding = '2px 3px 0 3px';  
myIntroStyles.backgroundColor = '#FFF';  
myIntroStyles.marginTop = '20px';

這里我們只是要了基本的CSS屬性名稱，唯一區(qū)別是CSS屬性的名稱如果帶有-的話，就需要去除，比如用marginTop代替margin-top。例如，下面的代碼是不工作的，并且會拋出語法錯誤：

myIntroStyles.padding-top = '10em';  

// 產(chǎn)生語法錯誤：
// 在JavaScript里橫線-是減法操作符
// 而且也沒有這樣的屬性名稱

屬性可以像數(shù)組一樣訪問，所以利用這個知識我們可以創(chuàng)建一個函數(shù)來改變?nèi)魏谓o定元素的樣式：

function changeStyle(elem, property, val) {
    elem.style[property] = val; // 使用[]來訪問屬性
}

// 使用上述的函數(shù)： 
var myIntro = document.getElementById('intro'); // 獲取intro文本對象
changeStyle(myIntro, 'color', 'red');

這僅僅是個例子，所以該函數(shù)也許沒什么用，語法上來說，直接用還是會快點，例如（elem.style.color = ‘red’）。除了style屬性以外，一個節(jié)點（或元素）也還有其他很多屬性可以操作，如果你使用Firebug，點擊DOM選項卡可以看到所有該節(jié)點（或元素）的所有屬性：

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號