`

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

 
阅读更多
出处:http://jawallok.blog.163.com/blog/static/3332397420100510506276/

在前台脚本中,我们经常要操作页面元素的样式,比如标签页切换时,将当前标签加上一个样式,当切换到其他标签时,再将样式还原,本文介绍的是直接添加和移除 className 的方法。
归类: Javascript, (X)HTML/CSS, 关键词: 删除样式, hasClass, 检测样式, addClass, 增加样式, removeClass, 收藏本页到:
在前台脚本中,我们经常要操作页面元素的样式,比如标签页切换时,将当前标签加上一个样式,当切换到其他标签时,再将样式还原,本文介绍的是直接添加和移除 className 的方法。
<script type="text/javascript">
function hasClass(element, className)
{  
   var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');   
   return element.className.match(reg);
}

function addClass(element, className)
{
if (!this.hasClass(element, className))   
  {       
  element.className += " "+className;  
   }
}

function removeClass(element, className)
{   
 if (hasClass(element, className))
 {         
   var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');      

   element.className = element.className.replace(reg,' ');   
 }
}  
</script>
分享到:
评论

相关推荐

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

    这里,我们有三个实用的函数:`hasClass`、`addClass`和`removeClass`,它们分别用于检测一个元素是否具有特定的样式类、向元素添加样式类以及从元素中移除样式类。 首先,`hasClass`函数通过正则表达式检查元素的`...

    jQuery属性 toggleClass()方法添加和移除

    `classname`是CSS类名,是我们想要添加或移除的类。 2. **操作类的状态**: - 如果元素上还没有指定的`classname`,toggleClass()会将这个类添加到元素上。 - 如果元素上已经有了这个`classname`,toggleClass()...

    vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法

    本文将详细介绍如何在Vue项目中实现鼠标移入时添加一个class样式,而鼠标移出时则移除该样式(通常是添加或移除名为"active"的class),以及相关的实现方法和拓展知识。 首先,要在Vue组件中实现鼠标移入移出的...

    使用Javascript实现遮屏效果

    我们使用`addEventListener`方法添加事件监听器,`removeEventListener`方法移除监听器。 ```javascript function showOverlay() { const overlay = document.querySelector('.hidden-screen'); overlay.style....

    javascript轻松控制表格列样式的脚本代码.docx

    本文将详细介绍如何使用JavaScript来轻松控制表格列样式,包括如何遍历表格元素、动态设置class属性以及实现动态样式控制的功能。 #### 核心知识点解析 ### 1. 遍历Table表格元素 #### 1.1 获取Table元素 在...

    JavaScript样式.docx

    hasClassName用于检查元素是否已包含特定的类,addClassName用于添加类,而delClassName用于移除类。当className有多个时,这些函数能确保操作的准确性和稳定性。 然后,直接操作元素的style属性是另一种直接改变...

    javascript经典特效---带彩色边框的图片.rar

    4. **CSS类操作**:除了直接修改样式,还可以通过添加或移除CSS类来实现效果。使用`classList.add`和`classList.remove`方法,配合CSS预定义好的类,可以实现更复杂的动画效果。 5. **jQuery库**:如果项目中已经...

    JavaScript网页特效实践_贯穿案例

    - JavaScript可以检测窗口尺寸变化,配合CSS媒体查询实现响应式设计。例如,`window.addEventListener('resize', function() {...})`。 8. **AJAX异步数据交换** - AJAX允许在不刷新整个页面的情况下与服务器交换...

    JavaScript DOM元素常见操作详解【添加、删除、修改等】

    DOM(文档对象模型)是JavaScript操作网页的基石。...无论是获取、添加、删除还是修改DOM元素,都是通过操作DOM树中的节点来实现的。掌握这些基本操作,能够帮助开发者更加灵活地控制网页上的内容。

    JavaScript 拾碎[三] 使用className属性

    总之,JavaScript的`className`属性是实现动态CSS样式改变的重要工具,它使我们能够在用户的交互事件中轻松地添加、移除或切换元素的类,从而改变元素的视觉表现。理解并熟练运用这个属性,能极大地提升网页的用户...

    javascript实现下雪效果(实例代码)_.docx

    总结来说,JavaScript实现下雪效果主要通过动态创建DOM元素,结合CSS来设定样式,再利用JavaScript定时器更新元素位置,实现动态效果。为了增强用户体验,还可以添加风速控制、雪花密度调节等高级功能,使下雪效果...

    javascript动态操作表格

    对于选择表格,JavaScript提供了多种方法来实现。你可以通过设置单元格或行的`class`或`style`属性来改变其视觉表示,或者使用`checked`属性来模拟多选。例如,你可以这样选中一个单元格: ```javascript var cell ...

    javascript和jquery实现设置和移除文本框默认值效果代码

    在JavaScript中,我们可以通过为input元素添加onfocus和onblur事件监听器来实现相似的效果。onfocus事件会在输入框获得焦点时触发,而onblur事件会在输入框失去焦点时触发。通过检测输入框的值,并在适当的时候更改...

    javascript动态添加样式(行内式/嵌入式/外链式等规则)

    嵌入式样式的动态添加可以在JavaScript中使用标签来实现。下面是一个示例函数,它接收一个或两个参数(文档对象和CSS字符串),并将其作为内嵌样式添加到部分: ```javascript function insertStyles() { var doc, ...

    JavaScript实现简单的二级导航菜单实例

    - **动态类名控制**:通过`className`属性来动态添加或移除CSS类,从而改变元素的样式。这是一种高效且常用的方法来实现基于状态的样式切换。 - **CSS伪类**:`:hover`伪类使得元素在鼠标悬停时改变样式,是实现...

    JavaScript 试卷试题附答案

    如何实现在删除元素的一个样式的同时添加另一个样式? - **选项分析**: - A: `$('#ele').removeClass('className');$('#ele').addClass('ClassName');`:这是正确的写法。 - B: `$('us').removeClass('...

    一些常用且实用的原生JavaScript函数.docx

    这些原生JavaScript函数和技巧在实际开发中非常实用,它们提供了更高效、更简洁的方式来操作DOM、处理事件和样式,从而优化代码质量和性能。通过熟练掌握这些知识点,开发者可以更好地应对各种前端挑战。

    javascript经典特效---按钮上的说明文字.rar

    在JavaScript的世界里,实现按钮上的说明文字是一种常见的交互设计,它可以增强用户体验,提供更清晰的操作指导。本资源“javascript经典特效---按钮上的说明文字.rar”包含一个名为“按钮上的说明文字.htm”的文件...

    javaScript教程及实例讲解

    2. CSS操作:JavaScript可以改变元素的样式,如通过style对象或修改className。 六、异步编程 1. 回调函数:处理非同步任务的常见方式,但可能导致回调地狱。 2. Promise:用于处理异步操作,提供更好的错误处理和...

Global site tag (gtag.js) - Google Analytics