- 相關(guān)推薦
針對(duì)dom元素的分析應(yīng)用
如果這個(gè)DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動(dòng)態(tài)的向html里寫入DOM元素。
今天這章我們就講這兩個(gè)應(yīng)用
�。ㄒ唬⿲�(duì)html里現(xiàn)有的DOM元素進(jìn)行操作。
我上面說了，對(duì)現(xiàn)有的DOM元素進(jìn)行操作，無非就是對(duì)樣式的操作。所以我們首先就要能獲取這個(gè)DOM元素的樣式。在講獲取DOM元素的樣式之前。先要說下DOM元素的樣式鏈接方式。有三種。
一是直接在html文檔里寫入樣式例如
二是在html文檔頭部用樣式標(biāo)簽插入例如
#dom{width:300px;height:200px;background:#000;}
三就是我們常用的鏈入方式例如
這三種的用JS操作它樣式的方法都不太相同
重點(diǎn)我們說第一種鏈入樣式操作，因?yàn)槭亲畛Ｓ玫模彩亲罘奖愕摹?/p>
第二種鏈入樣式操作麻煩。
第三種鏈入樣式操作麻煩不說，而且無法直接修改樣式，想修改的話還必須用第一種的方法，也就是說只能看不能摸
第一種鏈入樣式的操作方法
例
獲取它的高度屬性，首先當(dāng)然是獲取DOM元素了,用前幾章的方法
var a = document.getElementById("dom");
再來獲取它的高度屬性，很簡單
var h = a.style.height;
以此類推，獲取寬度，獲取背景色
var w = a.style.width;
var bg = a.style.background;
注意那個(gè)外邊距屬性是margin-top;
要獲取這個(gè)不能直接寫
var mt = a.style.margin-top;
要用JQ中提到的駱駝寫法
var mt = a.style.marginTop;
獲取它當(dāng)然沒什么用處，我們要能修改，修改起來也很方便。例如我們要把它的高度變?yōu)?00，很簡單,就一句
a.style.height = "100px";
其他的以此類推，我不再多說；
第二種鏈入樣式的操作方法
#dom{width:300px;height:200px;background:#000;margin-top:10px;}
這種操作需要區(qū)分瀏覽器。因?yàn)镮E和FF對(duì)這個(gè)獲取的代碼不同,比如獲取高度的方法是
var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules;
var a = domcss[0].style.height;
修改的話是這樣的
domcss[0].style.height = "100px";
這個(gè)我也不想解釋為什么是這樣寫。大家感興趣的自己去查下；
第三種鏈入樣式的操作方法
這種操作也需要區(qū)分瀏覽器。
獲取的話一般都是寫個(gè)函數(shù)，函數(shù)是這樣的
function CurrentStyle(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
假如我們那個(gè)css.css文件里面有height屬性
獲取方法是var a = CurrentStyle("dom").height;
無法用這里的方法直接修改，只能用第一種方法修改
這個(gè)我也不想解釋為什么是這樣寫。大家感興趣的自己去查下；
�。ǘ┯肑S動(dòng)態(tài)創(chuàng)建DOM元素。
其實(shí)這個(gè)很簡單就是幾個(gè)JS的方法而已，不過要像蓋房子一樣一步一步來，比如我要?jiǎng)?chuàng)建一個(gè)這樣的DOM元素：
第一步，要?jiǎng)?chuàng)建一個(gè)div節(jié)點(diǎn)。var newobj = document.createElement("div");
第二步，要給這個(gè)節(jié)加一個(gè)id屬性，并且屬性名是dom。newobj.setAttribute("id","dom");
第三步，要給這個(gè)節(jié)點(diǎn)加屬性了這里有兩種方，一種就是我們前面說到的修改樣式是這樣的newobj.style.width = "100px";還有一種就是第二步用到的那個(gè)方法newobj.setAttribute("width","100px"),其他屬性以此類推
第四步，就是要把這個(gè)節(jié)點(diǎn)給放到html文檔里，方法是這樣的document.body.appendChild(newobj)這句的意思是這樣的。document.body就是獲取了body元素
，appendChild(newobj)就是向這個(gè)body元素里添加一個(gè)孩子元素就是我們創(chuàng)建的那個(gè)節(jié)點(diǎn)。
如果你想移除這個(gè)節(jié)點(diǎn)是這樣document.body.removeChild(newobj);
�。ㄟ@個(gè)可以換的，換成你想要向那個(gè)里面添加子元素的的那個(gè)元素，比如我想向id為con的這個(gè)元素添加節(jié)點(diǎn)我們就這樣寫document.getElementById("con").appendChild(newobj)）
這就算是完成了。JS里有很多和appendChild差不多的方法。用法和這個(gè)一樣大家有興趣的可以去百度一下。所以我這里也就不說了，都不太常用。
好這章就到這里了，下章開始就用開始教大家寫一些效果了。
【針對(duì)dom元素的分析應(yīng)用】相關(guān)文章：
關(guān)于BOM與DOM的區(qū)別的分析09-04
關(guān)于Meta標(biāo)簽元素分析研究分析07-21
平面設(shè)計(jì)中元素的概念與應(yīng)用08-20
中國元素在動(dòng)畫設(shè)計(jì)中的應(yīng)用09-16
國畫元素在動(dòng)畫設(shè)計(jì)中的應(yīng)用07-21
廣告設(shè)計(jì)中中國元素的應(yīng)用09-28
色彩元素在室內(nèi)居室設(shè)計(jì)中的應(yīng)用05-07
五行元素在環(huán)境設(shè)計(jì)中的應(yīng)用01-04