通過jQuery來獲取要修改的DOM元素，然后通過JavaScript中方法來對屬性、類以及樣式進行修改

今天在本篇文章中將分享的是如何通過修改html元素節點的樣式，類和屬性來進一步的更改dom,，具有一定的參考價值，希望對大家有所幫助。

查找要選擇的元素

我們可以通過jQuery來選擇和修改DOM中的元素。jQuery簡化了選擇一個或多個元素并同時對所有元素應用更改的過程

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

例：function myFunction() {

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

}

效果圖：

訪問單個元素，我們可以改變文本的內容document.querySelector(".example").textContent="點擊文本發生變化";

效果圖：

修改屬性

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

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

hasAttribute()返回一個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類用于將樣式應用于多個元素，這與每頁只能存在一次的ID不同。在JavaScript中，我們有className和classList屬性來處理class屬性。方法/屬性描述例

className獲取或設置類值element.className;

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

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

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

classList.replace()用新的類值替換現有的類值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");

}

效果圖：

總結：以上就是本篇文章的全部內容了，希望對大家有所幫助。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。