今天要接續昨天的主題,繼續談在選取 DOM 之後,有哪些語法可以動態更改 HTML 元素的屬性及 CSS 屬性。
先取得我們想操作的 DOM,並宣告變數var el = document.querySelector('.titleClass a');
再用 setAttribute() 更改屬性的值,括號內分別要放 '要更改的屬性' 及 '要更改的值'el.setAttribute('href','https://www.google.com.tw/');
假如我有一個 class
叫做 .str
,我想動態加上名為 strId
的 id
var el2 = document.querySelector('.str');
el2.setAttribute('id','strId');
假如我有一個 a 連結名為 .titleClass
,想要讀取該標籤內屬性的值
var el3 = document.querySelector('.titleClass a').getAttribute('href');
//用 console.log 去查,結果會是一串網址
className
特性可用來變更 class
屬性值,如果屬性不存在,它會建立屬性並將指定的值設定於屬性中。注意,如果原本就有 class
值,再用 className
賦予值的話,會取代原本的 class
值,而不是將新的值加入既有的 class
名稱中。document.querySelector('.titleClass').className = 新的 class 名稱;
classList
是 DOM 的一個唯讀屬性,但它本身也是一個物件,我們可以使用裡面的方法新增、刪除、修改節點上的 CSS class
。
假如有一個叫做 .myDiv
的元素,我想幫它多加一個 class
名(.mystyle
),但如果用 className
特性來處理的話,添加新名稱會把原本 .myDiv
的名稱給覆蓋掉,這時就可以用 classList
物件裡的 add()
方法。document.querySelector('.myDIV').classList.add('mystyle');
classList
物件中除了 add()
方法以外,還有 remove()
/ toggle()
/ contains()
/ length
屬性 / 索引值。
參考資料:JS基礎篇–HTML DOM classList 屬性、HTML DOM classList 属性
style
是 DOM 物件的一個特性,它本身也是一個物件。style
物件裡的特性跟 CSS 屬性是對應的,有些名稱相同,有些名稱不同,例如 CSS 的 font-size
屬性對應的 style
特性是 fontSize
,而 display
屬性對應到 style
特性也是 display
。document.querySelector('.titleClass').style.屬性名 = 值;
下集預告:如何用 JS 新增內容至 HTML