修改DOM中屬性、類和樣式的方法

這篇文章主要介紹了修改DOM中屬性、類和樣式的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

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

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

查找要選擇的元素

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

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

例：

function myFunction() {
    document.querySelector(".example").style.backgroundColor = "pink";
}

效果圖：

訪問單個(gè)元素，我們可以改變文本的內(nèi)容

 document.querySelector(".example").textContent="點(diǎn)擊文本發(fā)生變化";

效果圖：

修改屬性

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

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

function demo(){
	var img =document.getElementsByTagName("img")[0];
	img.setAttribute('src', 'images/2.jpg');
}

效果圖：

修改類

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

例：

.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");
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享修改DOM中屬性、類和樣式的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!