網站首頁 語言 會計 互聯網計算機 醫學 學歷 職場 文藝體育 範文
當前位置:學識谷 > 設計製作 > 網頁設計

針對dom元素的分析應用

欄目: 網頁設計 / 發佈於: / 人氣:3.14W

如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態的向html裏寫入DOM元素。

針對dom元素的分析應用

今天這章我們就講這兩個應用

(一)對html裏現有的DOM元素進行操作。

我上面説了,對現有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣式。在講獲取DOM元素的樣式之前。先要説下DOM元素的樣式鏈接方式。有三種。

一是直接在html文檔裏寫入樣式例如

二是在html文檔頭部用樣式標籤插入例如

#dom{width:300px;height:200px;background:#000;}

三就是我們常用的鏈入方式例如

這三種的用JS操作它樣式的方法都不太相同

重點我們説第一種鏈入樣式操作,因為是最常用的,也是最方便的。

第二種鏈入樣式操作麻煩。

第三種鏈入樣式操作麻煩不説,而且無法直接修改樣式,想修改的話還必須用第一種的方法,也就是説只能看不能摸

第一種鏈入樣式的操作方法

獲取它的高度屬性,首先當然是獲取DOM元素了,用前幾章的方法

var a = lementById("dom");

再來獲取它的高度屬性,很簡單

var h = ht;

以此類推,獲取寬度,獲取背景色

var w = h;

var bg = ground;

注意那個外邊距屬性是margin-top;

要獲取這個不能直接寫

var mt = in-top;

要用JQ中提到的駱駝寫法

var mt = inTop;

獲取它當然沒什麼用處,我們要能修改,修改起來也很方便。例如我們要把它的高度變為100,很簡單,就一句

ht = "100px";

其他的以此類推,我不再多説;

第二種鏈入樣式的操作方法

#dom{width:300px;height:200px;background:#000;margin-top:10px;}

這種操作需要區分瀏覽器。因為IE和FF對這個獲取的代碼不同,比如獲取高度的方法是

var domcss = eSheets[0]ules||eSheets[0]s;

var a = domcss[0]ht;

修改的話是這樣的

domcss[0]ht = "100px";

這個我也不想解釋為什麼是這樣寫。大家感興趣的自己去查下;

第三種鏈入樣式的操作方法

這種操作也需要區分瀏覽器。

獲取的話一般都是寫個函數,函數是這樣的

function CurrentStyle(element){

return entStyle || omputedStyle(element, null);

}

假如我們那個文件裏面有height屬性

獲取方法是var a = CurrentStyle("dom")ht;

無法用這裏的方法直接修改,只能用第一種方法修改

這個我也不想解釋為什麼是這樣寫。大家感興趣的自己去查下;

(二)用JS動態創建DOM元素。

其實這個很簡單就是幾個JS的方法而已,不過要像蓋房子一樣一步一步來,比如我要創建一個這樣的DOM元素:

第一步,要創建一個div節點。var newobj = teElement("div");

第二步,要給這個節加一個id屬性,並且屬性名是dom。ttribute("id","dom");

第三步,要給這個節點加屬性了這裏有兩種方,一種就是我們前面説到的修改樣式是這樣的h = "100px";還有一種就是第二步用到的'那個方法ttribute("width","100px"),其他屬性以此類推

第四步,就是要把這個節點給放到html文檔裏,方法是這樣的ndChild(newobj)這句的意思是這樣的。就是獲取了body元素

,appendChild(newobj)就是向這個body元素裏添加一個孩子元素就是我們創建的那個節點。

如果你想移除這個節點是這樣veChild(newobj);

(這個可以換的,換成你想要向那個裏面添加子元素的的那個元素,比如我想向id為con的這個元素添加節點我們就這樣寫lementById("con")ndChild(newobj))

這就算是完成了。JS裏有很多和appendChild差不多的方法。用法和這個一樣大家有興趣的可以去百度一下。所以我這裏也就不説了,都不太常用。

好這章就到這裏了,下章開始就用開始教大家寫一些效果了。

Tags:DOM 元素