您的位置:

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属性,以达到样式修改的目的。

JS修改Class中某个属性

2023-05-18
JS修改元素属性的全面指南

2023-05-18
js修改css3,js修改css属性的方法

本文目录一览: 1、想用js修改css3的关键帧属性,但是不知道怎么写代码,代码如下。 2、原生JS设置CSS3样式时,怎么添加兼容性前缀( 3、用JS修改或创建CSS3 animation @key

2023-12-08
JS修改属性详解

2023-05-20
js修改cssimportant的简单介绍

本文目录一览: 1、js如何直接修改css里面的属性值呢? 2、笔记:JS设置CSS样式的几种方式 3、如何用JS修改已加载的CSS样式表样式? 4、JS修改CSS设置的样式 5、如何使用jquery

2023-12-08
js获取classname后修改属性(js根据classna

本文目录一览: 1、js 怎么通过class改变样式 2、js和jq怎么修改className然后怎么能对其className操作 3、js获取ClassName后,怎样设置元素宽度 4、现在自学Ja

2023-12-08
JS修改Class

2023-05-20
google修改js,Google修改密码手机

2023-01-03
重学java笔记,java笔记总结

2022-11-23
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
js修改css生效(js修改css属性)

本文目录一览: 1、JS修改元素的CSS属性后是何时生效的 2、为什么网站JS和css文件修改完,第二天才生效? 3、如何用JS修改已加载的CSS样式表样式? JS修改元素的CSS属性后是何时生效的

2023-12-08
印象笔记记录java学习(Java成长笔记)

2022-11-12
javascript简要笔记,JavaScript读书笔记

2022-11-17
jQuery修改class属性详解

2023-05-20
python基础学习整理笔记,Python课堂笔记

2022-11-21
js控制class样式修改,js如何定义class

2022-12-02
js元素添加移除class,js移除某个元素

2022-11-24
java学习笔记(java初学笔记)

2022-11-14
发篇java复习笔记(java课程笔记)

2022-11-09
js怎样修改样式(js怎么修改style)

本文目录一览: 1、JS 动态修改CSS 样式方法/全局 2、怎样用js修改div里标签的样式 3、JS修改CSS设置的样式 4、js 怎么通过class改变样式 JS 动态修改CSS 样式方法/全局

2023-12-08