CSS DOM的小知識 一

2022-09-01 09:54:12 字數 1437 閱讀 4974

在dom程式設計藝術中,css-dom應用很廣泛。

1.style屬性

通過element.style.property可以獲得元素的樣式,但是style屬性只能夠返回內嵌樣式,對於外部樣式表的樣式和head中的style樣式都無法獲取,這就限制了此方法的使用。

輸出:

若更改樣式,則如下:

輸出:

但是實際中,可以使用style方法設定樣式,這種方法的用處還是很大。

輸出:2.classname屬性

這種屬性之前一直忽略了,最近發現其實非常好用。這也是今天寫這篇文章的主要原因。

我們設定乙個屬性的類的時候,可以使用:elem.setattribute('class',value),比如之前的例子:para.setattribute("class","info"),這表示設定p元素class的屬性值為info。

但更簡單的正規化是更新classname屬性。classname屬性是乙個可讀/可寫的屬性。凡是元素節點都有這個屬性。

獲得乙個元素的class屬性:

element.classname;

設定乙個元素的class屬性:

element.classname = value;

唯一的不足就是通過classname屬性設定某個元素的class屬性是將替換(而不是)追加該元素原有的class設定。

實際中可以採用拼接操作,把新的class設定追加到classname屬性上去:elem.classname += "  info";(此處info前面注意空格)

我們在實際中,也經常呼叫addclass函式,這個函式可以追加新的class到目標元素上面。

function addclass(element, value)else {

newclassname = element.classname;

newclassname + = 『 』;(注意空格)

newclassname + =value;

element.classname = newclassname;

CSS DOM的小知識 二

上篇文章說到,通過element.style.property可以獲得元素的樣式,但是style屬性只能夠返回內嵌樣式,對於外部樣式表的樣式和head中的style樣式都無法獲取,這就限制了此方法的使用。這幾天做了乙個實際的例子,感覺可以拿出來講講,填補一下這方面的知識的空白。最終的效果是這樣的 h...

《DOM程式設計藝術》中CSS DOM的總結(一)

前言 前面是純總結,後面實現了乙個用dom改變樣式的demo。開始 html文件中每個元素節點都有乙個style屬性,style屬性包含著元素的樣式,查詢這個這個屬性將會返回乙個物件,節點對應的樣式都存放在這個style屬性裡。乙個demo 可以彈出彈窗,返回標籤應用的css樣式 an exampl...

Entity Framework 小知識(一)

零 ef初始化資料庫策略 上一節我們演示的是在資料庫不存在的情況下運算元據庫的方法,但是某些情況下資料庫是已經存在的 例如 對已有系統的公升級改造擴充套件 dba已經將資料庫提前建立等等 那麼這種情況下我們該怎麼辦呢?這時我們就用到了ef資料庫初始化的三種策略。這三種策略如下 如果資料庫不存在,則建...