通過(guò)jQuery來(lái)獲取要修改的DOM元素，然后通過(guò)JavaScript中方法來(lái)對(duì)屬性、類以及樣式進(jìn)行修改

今天在本篇文章中將分享的是如何通過(guò)修改html元素節(jié)點(diǎn)的樣式，類和屬性來(lái)進(jìn)一步的更改dom,，具有一定的參考價(jià)值，希望對(duì)大家有所幫助。

查找要選擇的元素

我們可以通過(guò)jQuery來(lái)選擇和修改DOM中的元素。jQuery簡(jiǎn)化了選擇一個(gè)或多個(gè)元素并同時(shí)對(duì)所有元素應(yīng)用更改的過(guò)程

其中，document.querySelector()和document.getElementById()是用于訪問(wèn)單個(gè)元素的方法。

例：function myFunction() {

document.querySelector(".example").style.backgroundColor = "pink";

}

效果圖：

訪問(wèn)單個(gè)元素，我們可以改變文本的內(nèi)容document.querySelector(".example").textContent="點(diǎn)擊文本發(fā)生變化";

效果圖：

修改屬性

屬性是包含有關(guān)HTML元素的其他信息的值。它們通常由名稱/值構(gòu)成，具體取決于元素。

在JavaScript中，我們有四種修改元素屬性的方法：方法描述例

hasAttribute()返回一個(gè)true或false布爾值element.hasAttribute('href');

getAttribute()返回指定屬性的值或 nullelement.getAttribute('href');

setAttribute()添加或更新指定屬性的值element.setAttribute('href', 'index.html');

removeAttribute()從元素中刪除屬性element.removeAttribute('href');function demo(){

var img =document.getElementsByTagName("img")[0];

img.setAttribute('src', 'images/2.jpg');

}

效果圖：

修改類

CSS類用于將樣式應(yīng)用于多個(gè)元素，這與每頁(yè)只能存在一次的ID不同。在JavaScript中，我們有className和classList屬性來(lái)處理class屬性。方法/屬性描述例

className獲取或設(shè)置類值element.className;

classList.add()添加一個(gè)或多個(gè)類值element.classList.add('active');

classList.toggle()在元素中切換類名element.classList.toggle('active');

classList.contains()檢查類值是否存在element.classList.contains('active');

classList.replace()用新的類值替換現(xiàn)有的類值element.classList.replace('old', 'new');

classList.remove()刪除類值element.classList.remove('active');

例：.demo1{

width:100px;

height:100px;

background-color: pink;

}

.demo2{

width:200px;

height:200px;

background-color:skyblue;

}

function demo(){

var p =document.getElementsByTagName("p")[0];

p.classList.toggle("demo2");

}

效果圖：

總結(jié)：以上就是本篇文章的全部?jī)?nèi)容了，希望對(duì)大家有所幫助。

總結(jié)

以上是生活随笔為你收集整理的php js怎么去掉类属性,如何修改DOM中的属性，类和样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。