JS修改Class中某個屬性

一、js修改style中某個屬性


//HTML代碼
<div id="myDiv" style="width:100px; height:200px; background-color:red;"></div>

//JS代碼
var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "blue";

在上述代碼中,我們通過使用id選擇器獲取了一個div元素,並修改了其背景顏色屬性為藍色。這是一種非常常用的方法,其中myDiv.style就直接獲取了現有元素中原有的style信息,我們在其基礎上修改了background-color屬性。

二、原生js修改class中某個屬性


//HTML代碼
<div class="myClass" id="myDiv"></div>

//JS代碼
document.querySelector(".myClass").style.backgroundColor = "blue";

在上述代碼中,我們使用了原生的javascript方法querySelector定位了class名稱為myClass的div元素,並修改了其背景顏色屬性為藍色。由於querySelector是基於CSS選擇器的,我們可以通過靈活的CSS選擇器定位到想要修改的元素。

三、js修改class屬性名稱


//HTML代碼
<div class="oldClass" id="myDiv"></div>

//JS代碼
document.querySelector("#myDiv").classList.replace('oldClass', 'newClass');

在上述代碼中,我們通過querySelector獲取到了id為myDiv的元素,並使用classList替換其class屬性中的oldClass為newClass。classList是一個集合對象,提供了一系列常用的方法,例如add、remove、replace等。

四、js修改當前class屬性


//HTML代碼
<div class="myClass" id="myDiv"></div>

//JS代碼
document.getElementById("myDiv").className += " newClass";

在上述代碼中,我們通過使用id選擇器獲取了一個div元素,並在原有的class屬性值後面添加了新的class名稱newClass。這種方法通常用於我們需要在原有的class值後面添加新的class名稱,以達到樣式修改的目的。

五、js修改class屬性


//HTML代碼
<div class="myClass1 myClass2" id="myDiv"></div>

//JS代碼
document.getElementById("myDiv").className = "myClass3 myClass4";

在上述代碼中,我們通過使用id選擇器獲取了一個div元素,並替換了其class屬性為myClass3和myClass4。這種方法通常用於我們需要完全更改class屬性,而不僅僅是在原有class值後面添加新的class名稱,以達到樣式修改的目的。

六、js修改元素class


//HTML代碼
<div class="myClass" id="myDiv"></div>

//JS代碼
var myDiv = document.getElementById("myDiv");
myDiv.classList.add("newClass");

在上述代碼中,我們通過使用id選擇器獲取了一個div元素,並使用classList提供的add方法,把新的class名稱newClass添加到了原有的class列表中。這種方法非常靈活,我們可以通過add、remove、toggle等方法自由地修改元素的class屬性,以達到樣式修改的目的。

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/285700.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-22 15:45
下一篇 2024-12-22 16:05

相關推薦

發表回復

登錄後才能評論