在JavaScript中添加css样式(js追加类)代码示例

 更新时间:2024年01月06日 11:52:02   作者:linlinlove2  
这篇文章主要给大家介绍了关于在JavaScript中如何添加css样式,也就是js追加类的相关资料,JavaScript是一种广泛应用于互联网开发的编程语言,它能够帮助网页实现动态效果和交互性,需要的朋友可以参考下

一、原生js中添加类的方法

1.为 <div> 元素添加一个类:
document.getElementById("div").classList.add("类名");
2.为 <div> 元素添加多个类:
document.getElementById("div").classList.add("类名1","类名2","类名3",...);
3.为 <div> 元素移除一个类:
document.getElementById("div").classList.remove("类名");
4.为 <div> 元素移除多个类:
document.getElementById("div").classList.remove("类名1","类名2","类名3",...);

二、jquery中添加类的方法

1.为 <div> 元素添加一个类:
$("#div").addClass("类名");
2.为 <div> 元素添加多个类:
//只需要通过空格来间隔 class 值即可一次性添加多个 class
    $("#div").addClass("类名1 类名2 类名3");
3.为 <div> 元素移除一个类:
$("#div").removeClass("类名");
4.为 <div> 元素移除多个类:
//只需要通过空格来间隔 class 值即可一次性清除掉多个 class
    $("#div").removeClass("类名1 类名2 类名3");

三、检查是否含有某个类的方法

div.classList.contains('类名'); //return true or false

四、在JavaScript中添加CSS样式:

document.getElementById("myElement").style.backgroundColor = "red";

五、使用HTML DOM的setAttribute()方法更改CSS属性:

document.getElementById("myElement").setAttribute("style", "background-color: red;");

六、使用JavaScript可以通过动态创建样式表 style标签 来添加CSS样式。

例如,以下代码创建一个新的style标签,并将其添加到HTML文档中:

这个代码将所有p元素的文字颜色设为蓝色。

var style = document.createElement("style");
style.innerHTML = "p { color: blue; }";
document.head.appendChild(style);

七、修改已有的样式表

JavaScript也可以通过修改已有的样式表来添加CSS样式。例如,如果您有一个id为“myStyles”的style标签,您可以使用以下代码添加一个新的CSS规则:

这个代码也将所有p元素的文字颜色设为蓝色。

var stylesheet = document.getElementById("myStyles").sheet;
stylesheet.insertRule("p { color: blue; }", 0);
document.getElementById("clda-70a938b0").classList.add("is-open");
document.getElementById("Footer-70a938b0").classList.add("is-open");
document.getElementById("Footer-70a938b0").style.height = "170px";

总结 

到此这篇关于在JavaScript中添加css样式的文章就介绍到这了,更多相关JS添加css样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序实现手指拖动选项排序

    微信小程序实现手指拖动选项排序

    这篇文章主要介绍了微信小程序实现手指拖动选项排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • ES2020让代码更优美的运算符 (?.) (??)

    ES2020让代码更优美的运算符 (?.) (??)

    这篇文章主要介绍了ES2020让代码更优美的运算符 (?.) (??),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • javaScript中with函数用法实例分析

    javaScript中with函数用法实例分析

    这篇文章主要介绍了javaScript中with函数用法,实例分析了javascript中with的功能、定义及相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • JavaScript中如何在一个循环中等待示例代码详解

    JavaScript中如何在一个循环中等待示例代码详解

    这篇文章主要介绍了在JavaScript中如何在一个循环中等待(附代码示例),下面是如何使用for..of 循环来迭代一个数组并在循环内等待,需要的朋友可以参考下
    2022-08-08
  • js实现json数组分组合并操作示例

    js实现json数组分组合并操作示例

    这篇文章主要介绍了js实现json数组分组合并操作,涉及javascript针对json数组的遍历、判断、添加、赋值等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • JavaScript axios安装与封装案例详解

    JavaScript axios安装与封装案例详解

    这篇文章主要介绍了JavaScript axios安装与封装案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • 基于JavaScript实现简易计算器

    基于JavaScript实现简易计算器

    这篇文章主要为大家详细介绍了基于JavaScript实现简易计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 怎么用javascript进行拖拽2

    怎么用javascript进行拖拽2

    怎么用javascript进行拖拽2...
    2006-07-07
  • javascript实现仿银行密码输入框效果的代码

    javascript实现仿银行密码输入框效果的代码

    这篇文章通过实例代码给大家介绍了javascript实现仿银行密码输入框效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2007-12-12
  • 用js写“算24”游戏的思路分析与实现代码

    用js写“算24”游戏的思路分析与实现代码

    “算24”是一种游戏,小时候玩过,就是一副扑克,把大王,小王除掉,A算1点J,Q,K都算10点。任意抽4个牌,可以运用+-*/()来进行运算,把最后结果等于24。
    2008-05-05

最新评论