Dom程式設計 Element,改變樣式

2021-08-27 14:12:53 字數 880 閱讀 7762

var p =  document.createelement("p")

p.id="dwdw";

p.class="dwdw"

****小結***

setattribute()可以設定正常的屬性(id,class),也可以設定非標準的屬性,但需要在前面機上「data-」開頭

setattribute()設定的非標準屬性不能通過"div.id"這樣的方式訪問,可以用getattribute() 也可以用dataset訪問

那麼在用getattribute()和"div.id"訪問正常的屬性的值的時候有什麼區別嗎?最大的區別在會在你訪問style屬性的時候發現。點方法返回的是陣列,getattribute()返回的是字串。

你會發現訪問class也不能直接通過「div.id」這樣的方式,要通過classname和classlist前者返回乙個字串,後者返回乙個偽陣列

通過style訪問和改變樣式

但這樣只是在html文件中給標籤新增style屬性來改變樣式。我們還有什麼方法改變樣式呢?

1.我們可以提前寫好要修改的樣式放在樣式表中,通過css的選擇器來用不同的樣式,例如改變class屬性的值。這種情況可以應用到我們知道某個標籤會怎麼改變的情況。

2.我們可不可以直接操作樣式表呢?

我是div,請選中我

我是span,請不要選我

規則的建立,插入和刪除

insertrule(),addrule(),deletrule()。

Jquery 改變樣式

jquery 是乙個非常好用js庫,有很多的特殊的操作,為了方便,我們都可以引入jquery。在寫 web 專案是,往往我們的圖示,都是一些標籤,我們是通過樣式來修改顯示的圖示。我們要通過改變 中的 class 樣式來改變顯示的圖示。具體的 如下 網頁部分 我的 js部分 其中 中,用到了 attr...

使用datasest屬性改變樣式

對於html中的標籤我們可以自定義標籤中的屬性,例如給input加乙個aaa屬性 接下來獲取input的屬性並在控制台中輸出,即 let intype document.queryselector input console.log intype.type intype.type console.l...

DOM學習總結 Element型別

element型別用來表現xml和html元素,提供了對元素標籤名 子節點及特性的訪問。訪問標籤名 可以用nodename屬性,也可以用tagname屬性。html中,標籤名始終以大寫表示。xml中標簽名始終與源 中的保持一致。最好在比較之前轉換成相同大小寫形式。id 元素在文件中的唯一標示 tit...