一、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