js更改css class属性

一、js更改css class属性

1、更改一个标签的 class属性的代码是：

2、document.getElementById( id).className=字符串;

3、document.getElementById( id)用于获取标签对应的 DOM对象，你也可以用其它方法获取。className是 DOM对象的一个属性，它对应于标签的 class属性。字符串是 class属性的新值，它应该是一个已定义的CSS选择符。

4、class属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class属性的值，标签所引用的样式表也就更换了，所以这属于第一种修改方法。

5、利用这种办法可以把标签的CSS样式表替换成另外一个，也可以让一个没有应用CSS样式的标签应用指定的样式。

6、font-size: 30px; font-weight: bold; color: red;

7、<div id="tt">欢迎光临！</div>

8、<p><button on click="setClass()">更改样式</button></p>

9、<script type="text/javas cript">

10、document.getElementById("tt").className="txt";

二、浅析js class

1、在 ES6规范中，引入了 class的概念。使得 JS开发者终于告别了，直接使用原型对象模仿面向对象中的类和类继承时代。

2、但是JS中并没有一个真正的 class原始类型， class仅仅只是对原型对象运用语法糖。所以，只有理解如何使用原型对象实现类和类继承，才能真正地用好 class。

3、本质上js中class其实是构造函数的另一种写法，使之更加直观的展现构造器中的各项属性

4、(1)constructor是一个构造函数方法，创建对象时自动调用该方法

5、(2)constructor是类必须的一个属性，少了他类的创建会报错，如果我们不写的话js会给他自动加上

6、(3)this指的是实例化对象,就相当于构造函数中的this，指向的是当前创建的对象

7、(4)类中声明函数不需要function关键字，直接函数名即可

8、(5)方法之间不需要都好分割，加了会报错

9、因为本质上是构造函数的另一种写法，所以他的使用和一些其他特性都是和构造函数相似的。比如调用都是通过new关键字并且class也存在prototype这个属性，通过她我们可以给这个类的原型对象定义属性。通过这个类创建出的对象一样会有这个属性

10、子类继承基类后，同名的属性会覆盖掉基类，以上例子中两个类都有sayName函数，但是调用的时候输出的是子类的sayName。

11、一个构造函数可以使用 super关键字来调用一个父类的构造函数。

三、js代码如何封装添加class

1、在JavaScript中，封装一个添加类名的函数是实现代码复用的有效方式。以下是一个简单的函数，它接受两个参数：`element`是你想要添加类的DOM元素，`className`是你想要添加的类名。函数首先检查`element`是否是有效的DOM元素，然后获取当前的类名，并将其与新的类名结合。如果类名已经存在，它将确保不会重复添加。最后，函数将更新后的类名设置回元素。

2、function addClass(element, className){

3、 if(element.nodeType=== Node.ELEMENT_NODE){

4、 let classList= element.classList;

5、 if(!classList.contains(className)){

6、//假设有一个ID为'my-element'的元素

7、const myElement= document.getElementById('my-element');

8、//调用addClass函数向元素添加'my-class'类

9、addClass(myElement,'my-class');

10、确保在调用`addClass`函数之前，DOM已经完全加载。这通常意味着你应该在文档的`DOMContentLoaded`事件触发后或在``标签之前调用该函数。