JS中的className操作

刘厚水发布于2019-08-20 12:31 / 1099人阅读

摘要：检查元素是否已经存在某下面的正则表达式用来检查元素是否已经存在某个使用操作使用操作现代浏览器都支持使用方法来操作元素的，但是中不支持该方法，即使使用了

添加className

(1)修改元素的“所有”的 class

用新的 class 替换掉原有的所有 class，可以设置 className 属性：

document.getElementById("MyElement").className = "MyClass";

（如果想替换为多个 class，可以使用空格分隔。）

(2)为元素添加新的 class

如果想添加一个新的 class，并保留所有原有的 class，可以：

document.getElementById("MyElement").className += " MyClass";

（注意 MyClass 前面的空格。）

删除className

(1)删除元素的某个 class

如果要删除某个元素的单个 class 属性，而不影响其它 class，可以使用正则表达式进行替换：

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|s)MyClass(?!S)/g , "" )

正则表达式解释：

(?:^|s) # 匹配字符串开始，或者单个空白字符。以字符串开头或者以空格开头
MyClass  # 需要移除的 class 值
(?!S)   # negative lookahead to verify the above is the whole classname
         # ensures there is no non-space character following
         # (i.e. must be end of string or a space)

g 可以进行全局匹配。

检查元素是否已经存在某 class

下面的正则表达式用来检查元素是否已经存在某个 class：

if ( document.getElementById("MyElement").className.match(/(?:^|s)MyClass(?!S)/) )

使用jQuery操作className

$("#MyElement").addClass("MyClass");

$("#MyElement").removeClass("MyClass");

if ( $("#MyElement").hasClass("MyClass") )

$("#MyElement").toggleClass("MyClass");

使用HTML5 操作 classes

现代浏览器都支持使用classList方法来操作元素的className，但是IE10中不支持该方法，即使使用了shim

document.getElementById("MyElement").classList.add("class");

document.getElementById("MyElement").classList.remove("class");

if ( document.getElementById("MyElement").classList.contains("class") )

document.getElementById("MyElement").classList.toggle("class");

GPU服务器云服务器 js中的异步操作 webrtc中的优化操作 classnames className

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81031.html

jQuery 源码系列（十八）class 相关操作

摘要：眼看的源码就快到头了，后面还有几个重要的内容，包括和动画操作，加油把它们看完，百度前端学院的新一批课程也开始了。，当第二个参数为的情况，就是，为时，，从源码来看，就是直接调用的这两个函数。参考源码分析样式操作本文在上的源码地址，欢迎来。欢迎来我的专栏查看系列文章。眼看 jQuery 的源码就快到头了，后面还有几个重要的内容，包括 ajax 和动画操作，加油把它们看完，百度前端学院的...

BingqiChen 2019-08-21 11:32 评论0 收藏0
从规范去看Function.prototype.apply到底是怎么工作的？

摘要：如果是或者，会将作为值。否则，被调用的函数，进行转换后，作为值。又怎么操作这个很神奇。能转换它的参数为到总共个整数中的一个，这个函数遵循以下规则。不断加入新方法的规范也是这个初衷。 showImg(https://segmentfault.com/img/remote/1460000012563719); 今天看element-react源码的时候，又看到了这张似曾相识却又异常陌生的老...

tanglijun 2019-08-21 18:22 评论0 收藏0
原生JS操作DOM元素的类名class

摘要：如果这些类已经存在于元素的属性中，那么它们将被忽略。删除指定的类值。按集合中的索引返回类值。用一个新类替换已有类。 1.classList 详见MDN Element.classList add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。remove( String [,String] )删除指定的类值。item ( N...

liujs 2019-08-23 13:51 评论0 收藏0
原生JS操作DOM元素的类名class

摘要：如果这些类已经存在于元素的属性中，那么它们将被忽略。删除指定的类值。按集合中的索引返回类值。用一个新类替换已有类。 1.classList 详见MDN Element.classList add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。remove( String [,String] )删除指定的类值。item ( N...

lemanli 2019-08-02 12:08 评论0 收藏0
原生JS操作DOM元素的类名class

摘要：如果这些类已经存在于元素的属性中，那么它们将被忽略。删除指定的类值。按集合中的索引返回类值。用一个新类替换已有类。 1.classList 详见MDN Element.classList add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。remove( String [,String] )删除指定的类值。item ( N...

QLQ 2019-08-29 17:28 评论0 收藏0