javascript針對DOM的應用分析（三）
2024-05-06 14:22:06
供稿：網友
如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態的向html里寫入DOM元素。
今天這章我們就講這兩個應用
（一）對html里現有的DOM元素進行操作。
我上面說了，對現有的DOM元素進行操作，無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣式。在講獲取DOM元素的樣式之前。先要說下DOM元素的樣式鏈接方式。有三種。
一是直接在html文檔里寫入樣式例如
<div style="width:300px;height:200px;background:#000;"></div>。
二是在html文檔頭部用樣式標簽插入例如
<style>
#dom{width:300px;height:200px;background:#000;}
</style>
三就是我們常用的鏈入方式例如
<link rel="stylesheet" type="text/css" href="css.css" />
這三種的用JS操作它樣式的方法都不太相同
重點我們說第一種鏈入樣式操作，因為是最常用的，也是最方便的。
第二種鏈入樣式操作麻煩。
第三種鏈入樣式操作麻煩不說，而且無法直接修改樣式，想修改的話還必須用第一種的方法，也就是說只能看不能摸
第一種鏈入樣式的操作方法
例<div id="dom" style="width:300px;height:200px;background:#000;margin-top:10px;"></div>
獲取它的高度屬性，首先當然是獲取DOM元素了,用前幾章的方法
var a = document.getElementById("dom");
再來獲取它的高度屬性，很簡單
var h = a.style.height;
以此類推，獲取寬度，獲取背景色
var w = a.style.width;
var bg = a.style.background;
注意那個外邊距屬性是margin-top;
要獲取這個不能直接寫
var mt = a.style.margin-top;
要用JQ中提到的駱駝寫法
var mt = a.style.marginTop;
獲取它當然沒什么用處，我們要能修改，修改起來也很方便。例如我們要把它的高度變為100，很簡單,就一句
a.style.height = "100px";
其他的以此類推，我不再多說；
第二種鏈入樣式的操作方法
<style>
#dom{width:300px;height:200px;background:#000;margin-top:10px;}
</style>
這種操作需要區分瀏覽器。因為IE和FF對這個獲取的代碼不同,比如獲取高度的方法是
var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules;
var a = domcss[0].style.height;
修改的話是這樣的
domcss[0].style.height = "100px";
這個我也不想解釋為什么是這樣寫。大家感興趣的自己去查下；
第三種鏈入樣式的操作方法
<link rel="stylesheet" type="text/css" href="css.css" />
這種操作也需要區分瀏覽器。
獲取的話一般都是寫個函數，函數是這樣的
function CurrentStyle(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
假如我們那個css.css文件里面有height屬性
獲取方法是var a = CurrentStyle("dom").height;
