开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生js添加类名

在原生 JavaScript 中，添加类名通常使用 classList 属性。classList 提供了添加、删除、切换类名的方法，使得操作类名变得更加方便。

添加类名的方法

使用 classList.add() 方法可以向元素添加一个或多个类名。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加类名示例</title>
    <style>
        .red {
            color: red;
        }
        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p id="myParagraph">这是一个段落。</p>

    <script>
        // 获取元素
        const paragraph = document.getElementById('myParagraph');

        // 添加单个类名
        paragraph.classList.add('red');

        // 添加多个类名
        paragraph.classList.add('bold');
    </script>
</body>
</html>

在上述示例中，段落文本将会变成红色并且加粗，因为通过 JavaScript 添加了 red 和 bold 这两个类名。

优势

简洁易用：classList 提供了简洁的方法来操作类名，避免了直接操作 className 属性时可能出现的字符串拼接和处理问题。
避免冲突：使用 classList 添加类名不会覆盖元素上已有的其他类名，减少了因操作类名而导致的样式冲突。
兼容性：现代浏览器都支持 classList 属性，对于不支持的浏览器，可以使用 polyfill 或者回退到操作 className 属性的方法。

应用场景

动态改变元素样式：根据用户交互或其他条件动态添加或删除类名，从而改变元素的样式。
实现动画效果：通过添加和删除类名来触发动画效果。
条件渲染：根据不同的条件为元素添加不同的类名，实现条件渲染。

注意事项

当使用 classList.add() 方法添加多个类名时，类名之间不需要加空格，直接传递多个参数即可。
如果尝试添加的类名已经存在，classList.add() 方法不会报错，也不会重复添加。

如果在操作类名时遇到问题，比如类名没有生效，可能是以下原因：

选择器错误：确保使用正确的选择器获取到了目标元素。
样式冲突：检查是否有其他样式规则覆盖了添加的类名所定义的样式。
JavaScript 错误：检查控制台是否有 JavaScript 错误，错误可能会阻止脚本的执行。
类名拼写错误：确保添加的类名拼写正确，并且与 CSS 中定义的类名一致。

通过仔细检查这些方面，通常可以解决添加类名不生效的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

原生JS添加Class类名删除类名

原生JS添加类名删除类名为 div>元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); 为 div 元素添加多个类...('myCssClass'); //return true or false 另一种给元素添加class属性 document.getElementsByTagName('body')[0].className...document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价小结:JS...一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码： $(document).ready(function(){ //这里放入执行代码 }) 一般情况下最好是单独把javascript放在js...文件里，通过head里的js">链接起来，css则是通过。

7.6K4 0

原生JS | 通过类名获取标签

HTML5学堂（码匠）：在原生JavaScript当中，存在默认的getElementsByClassName()方法，在不支持该方法的浏览器中，又应该怎么实现“通过类名获取标签”呢？...原生JS通过类名获取标签 getElementsByClassName()是原生JavaScript提供的方法，但是并不是所有的浏览器都支持，在ie早期版本的浏览器是不允许通过这个方法获取标签的，因此...JS功能代码 1....功能优化 – 解决类名的不足截止到目前，代码还存在一定的缺憾：对于拥有多个类名的标签，并不能够成功检测。...此时我们需要将每个类名先拆分出来（将组合的类名拆解成几个具体的类名，如class = "con box"是由con和box两个类名组成的，需要将"con box"拆解成"con"和"box"）。 ?

13.1K6 0

原生js添加元素

今天做页面使用的mui，因为使用mui情况下无法使用jquery，于是在ajax请求完毕添加元素的时候发现自己竟然对原生js添加元素的方法有点模糊了，真是越活越倒退了，赶紧整理一波。...接下来就是正题了，js推荐是这样进行元素添加： 1.创建游离元素节点：let div=document.createElement(“div”); 2.给创建元素添加属性：div.setAttribute...(“class”,”className”);注意setAttribute一次只能设置一条属性 3.创建文本节点:let textNode=document.createTextNode(“需要添加的文本...”)； 4.将文本节点添加到元素节点中div.appendChild(textNode); 5.加元素节点插入文档：Parent.appendChild(div); over 发布者：全栈程序员栈长，转载请注明出处

8.9K2 0

原生js动态添加元素

charset="UTF-8"> 原生...js动态添加元素 .phone { width: 200px; height: 30px;...; inputPhone.value = "请输入手机号码"; formId.appendChild(inputPhone); // js...动态添加li var ul = document.getElementById("parentUI"); var li = document.createElement(

6.8K2 0

原生JS动态添加、删除元素&内容

整理一下原生 js 添加及删除元素和内容的相关知识，供参考。... 刀是我拿的，人是我杀的一个容器，用来放添加的元素。一个button按钮，用来动态的操作DOM。...初始js代码： var container = document.getElementById("container"); var Element = document.getElementById("...} 添加元素：在元素内添加内容：文本内容 innerText container.innerText = '追加的内容'; HTML内容 innerHTML container.innerHTML...("h3");//创建一个html标签 ele.appendChild(text);//在标签内添加文字 container.appendChild(ele);//将标签添加到页面中删除元素：移除元素

27.4K4 0

如何在Vue中动态添加类名

它使我们可以更轻松地编写自定义主题，根据组件的状态添加类，还可以编写依赖于样式的组件的不同变体。添加动态类名与在组件中添加 prop :class="classname"一样简单。...在本文中，我们将讨论很多内容：在 Vue 中使用静态和动态类如何使用常规的 JS 表达式来计算我们的类动态类名的数组语法对象语法快速生成类名如何在自定义组件上使用动态类名静态和动态类在Vue... 这里你会注意到，我们必须在动态类名周围添加额外的引号。这是因为v-bind语法接受我们作为 JS 值传递的任何内容。添加引号可以确保Vue将其视为字符串。...有条件的类名由于v-bind可以接受任何 JS 表达式，因此我们可以用它做一些非常酷的事情。我最喜欢的是在模板中使用三元表达式，它往往是非常干净和可读的。...快速生成类名我们已经介绍了许多动态添加或删除类名的不同方法。但是动态生成类名本身又如何呢？假设有一个Button组件，它为所有不同类型的按钮提供20种不同的CSS样式。

6.2K1 0

JavaScript和jQuery添加和删除class类名

JavaScript添加/删除类名： element.classList.add("className") ：添加类名 element.classList.remove("className") ：删除类名...element.getAttribute("className") ：获取类名 element.setAttribute("className") ：设置类名实例： <div class="one ...： ele.className = ""; // 获取类名： let classVal = ele.getAttribute("class"); //one two 设置类名： ele.setAttribute...("class","three"); //three jQuery添加/删除类名： element.addClass("className") ：添加类名 element.removeClass("className...") ：删除类名 removeClass() 方法可以从被选元素移除一个或多个类，如移除多个类，可以用空格隔开。

2.7K0 0

原生JS给可编辑DIV添加文字阴影

给大家分享一个用原生JS给可编辑DIV添加文字阴影的特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。原生...JS给可编辑DIV添加文字阴影 * { margin: 0; padding: 0;

11.5K4 0

html5设置table样式_原生js添加样式

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内...

14.6K2 0

java类名包名解释

service：是后来网上大多数人经验总结出来，从而增加了这么一个层次，主要是为了降低耦合，面向接口、组件编程，具体的服务类，能产生实际效果和影响的类放于此。...util:utility是存放工具类相关的JAVA代码的，比如采用filter过滤器，还有一些其他的相关小工具杂类亦存放于此。

1.2K1 0

java类名包名解释

service：是后来网上大多数人经验总结出来，从而增加了这么一个层次，主要是为了降低耦合，面向接口、组件编程，具体的服务类，能产生实际效果和影响的类放于此。...util:utility是存放工具类相关的JAVA代码的，比如采用filter过滤器，还有一些其他的相关小工具杂类亦存放于此。本博客所有文章如无特别注明均为原创。...作者：陌晴版权所有：《电光石火》 => java类名包名解释本文地址：http://www.ilkhome.cn/?post=311 欢迎转载！...复制或转载请以超链接形式注明，文章为陌晴原创，并注明原文地址 java类名包名解释，谢谢。

1.9K7 0

漫谈原生JS添加元素的两种方法

漫谈原生JS添加元素常规方法常规方法是首先创建一个目标元素并赋值给某个变量 ,但是元素里面内容较多,需要innerHTML赋值，将含有内容的变量赋值给目标元素的变量，最后，将这个目标元素的变量通过appendChild...document.createElement("span"); li.appendChild(span); var element = document.querySelector(".div1");//添加到指定位置...element.appendChild(lis); 便捷方法可以直接用insertAdajcentHTML（）将目标元素直接添加到指定位置。...此时添加的目标元素直接用字符串形式赋值到变量中。最重要的是注意引号的变化，外单内双或外双内单。...beforeend', li1); that.index();//无关 } insertAdajcentHTML（）详解 insertAdacentHTML（“插入的位置”，字符串的名）

2.6K1 0

Fabric.js 设置容器类名要注意这几点

如果想方便设置容器样式或者想通过 js 控制该容器，可以先给容器一个类名。本文主要讲如何给包装容器设置类名和相关注意事项。...设置容器类名在使用 fabric.js 创建画布时就可以通过 containerClass 设置包装容器的类名。...的话，建议使用该方法设置包装容器的类名。...容器有默认类名如果没使用 containerClass 设置包装容器类名，fabric.js 会将容器的类名设置为 canvas-container 。...代码仓库 ⭐Fabric.js 设置容器类名

1.1K5 0

js遍历添加栏目类添加css，再点击其它删除css

很多网页设计都可能会用到js遍历去增加css类别，这篇文章主要介绍了js遍历添加栏目类添加cs，再点击其它删除css的实例代码，非常不错，具有一定的参考借鉴借鉴价值，原作者是谁已无从知晓，但是代码是有效的...具体代码如下： //js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).click...removeClass("selected"); $(".ckselect").eq(index).addClass("selected") }) }); 还有一种更优的方案，代码如下： //js...allhide")) { $(".peoples").hide(); $(".peoples").removeClass("allhide") } }); 以上所述就是给大家介绍的js...遍历添加栏目类添加css，再点击其它删除css的教程，希望对大家有所帮助，如果大家有任何疑问请给我留言！

3.8K2 0

js书写原生ajax,JS 原生ajax写法

原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户，使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦

15.3K4 0

原生js怎么为动态生成的标签添加各种事件

这几天用zepto.js写了不少事件，突然想到一个问题，那就是原生的js如何给动态生成的标签添加事件？...因为这些标签都是后来通过ajax或者运行其他点击事件生成的，那么如果之前给他们写事件他们这个dom对象是找不到的，jq通过事件委托解决了这个问题，但是原生js这个问题该怎么解决呢？...我在网上查了很多资料，好像只有一种办法，那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签的各种事件，如果有更好的方法，欢迎提出来。 <!

8K5 0

原生JS TitleTip

What How Why 原生JS TitleTip 为了实现对特定的A标签Title的美化，使其可以按照我们想要的样式显示。

6.2K4 0

JS原生复制

本文最后更新于2022年02月22日，已超过110天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！

16.9K3 0

原生JS拖拽

content="IE=edge"> 原生...JS拖拽 * { margin: 0; padding: 0; }

13.1K4 0

feign包名路径添加问题

1. feign包名路径添加问题 1.1....问题在SpringCloud中使用feign调用路径中，不能在类上直接添加@RequestMapping(value = "/hospital-auth"）作为公共路径 1.2....解决方式添加path @FeignClient(path = "/hospital-auth",value = "hospital-auth", fallback = HospitalFallBack.class

9900 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭