`

用 Javascript 实现检测、添加、移除样式(className)

 
阅读更多

前台脚本中,我们经常要操作页面元素的样式,比如标签页切换时,将当前标签加上一个样式,当切换到其他标签时,再将样式还原,本文介绍的是直接添加和移除 className 的方法。

Javascript:  

     

  1. <script type="text/javascript">

  2.  

  3. // 说明:添加、移除、检测 className

  4.  

  5. function hasClass(element, className) {

  6. var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');

  7. return element.className.match(reg);

  8. }

  9.  

  10. function addClass(element, className) {

  11. if (!this.hasClass(element, className))

  12. {

  13. element.className += " "+className;

  14. }

  15. }

  16.  

  17. function removeClass(element, className) {

  18. if (hasClass(element, className)) {

  19. var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');

  20. element.className = element.className.replace(reg,' ');

  21. }

  22. }

  23.  

  24. </script>

分享到:
评论

相关推荐

    Javascript 检测、添加、移除样式(className)函数代码

    在前台脚本中,我们经常要操作页面元素的样式,比如标签页切换时,将当前标签加上一个样式,当切换到其他标签时,再将样式还原,本文介绍的是直接添加和移除 className 的方法。

    基于JavaScript实现类名的添加与移除

    方法1:使用className属性; 方法2:使用classList API; //用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)'+name+'(\\s+|$)'); } //hasClass addClass removeClass toogleClass var ...

    JavaScript修改css样式style动态改变元素样式

    需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。 调用方法: 如果改变className,则事先在样式表中申明类,但...

    【JavaScript源代码】JavaScript实现经典贪吃蛇游戏.docx

     本文实例为大家分享了JavaScript实现经典贪吃蛇游戏的具体代码,供大家参考,具体内容如下 主要使用单例模式,所有元素动态创建; 1.创建地图 var Map; function map(){ this.mapp=null; this.makemap=...

    js实现简单的className不兼容问题

    使用封装的思想,简单的实现IE浏览器在javascript中对getElementsByClassName的不兼容问题,实现的方法简单,通俗易懂

    javascript通过className获取文件元素.docx

    javascript通过className获取文件元素.docx

    JavaScript 拾碎[三] 使用className属性

    B 使用className 属性 Javascript 还可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。 代码示例: 代码如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;追加CSS类别&lt;/title

    javascript动态设置样式style实例分析

    本文实例讲述了javascript动态设置样式style的方法。分享给大家供大家参考。具体分析如下: 动态修改style 1.易错:修改元素的样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用”style.属性...

    jQuery 添加/移除CSS类实现代码

    其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了...

    JavaScript实现轮播图方法一

    多个DIV,所有的DIV都由JavaScript生成,每个DIV的className均为photo,再通过数组来操控每个DIV的display属性,最后用定时器完成轮播图

    JavaScript详解(第2版)

     14.9 使用〈span〉标签重写或添加样式   14.9.1 〈span〉标签和style属性   14.9.2 〈span〉标签和class属性   14.9.3 继承和上下文选择器   14.10 定位元素和层   14.10.1 绝对定位   14.10.2...

    查看ClassName的小工具

    查看ClassName的小工具,能看到任意控件的ClassName和Text属性

    JavaScript 实现HTML业务流程图

    &lt;!-- s --&gt; &lt;LI class=step_1&gt;1....&lt;LI class=step_2&gt;2....&lt;LI class=step_3&gt;3....&lt;LI class=step_4&gt;4....&lt;LI class=step_5&gt;5.... document.getElementById('step_div').className='flow_step_no'+step; } &lt;/script&gt;

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     5.3.2 基于className切换样式   5.3.3 切换样式表   5.3.4 修改CSS规则   5.4 访问计算样式   5.5 Microsoft的filter属性   5.6 实例:简单的渐变效果   5.7 小结   第6章 案例研究:图像...

    Javascript数组操作高级心得整理

     使用className设置样式 27 3. 继承机制实现 27 (1) 继承的方式 27 (2) 继承方式1—对象冒充 27 (3) 继承方式2—call()方法与apply()方法 28  call()方法 28  apply()方法 28 (4) 继承方式3—原型链...

    javaScript给元素添加多个class的简单实现

    javaScript给元素添加多个class的简单实现 &lt;html&gt;  &lt;head&gt;  &lt;style type="text/css"&gt;  .div2{  font-size:16px;   color:orange;  }  .div3{  font-size:20px;  color:blue;  }  &lt...

    react-body-classname, 声明性嵌套状态化同构的body.className.zip

    react-body-classname, 声明性嵌套状态化同构的body.className react-body-classname 提供在 React App 中指定 document.body.className的声明方式。 支持服务器端使用。内置的反应副作用。安装yarn add react-bo

    JavaScript实现获取dom中class的方法

    本文实例讲述了JavaScript实现获取dom中class的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/...

Global site tag (gtag.js) - Google Analytics