一、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/n/285700.html
微信扫一扫 
支付宝扫一扫 