`
fuhao200866
  • 浏览: 78407 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多
// 说明:添加、移除、检测 className 
 
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,' '); 
    } 
}
分享到:
评论

相关推荐

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

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

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

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

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

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

    JS添加或修改控件的样式(Class)实现方法

    本文将详细介绍如何使用JavaScript和jQuery来添加或修改控件的样式(Class)。 首先,我们来看纯JavaScript的方法。在HTML中,我们通常会为元素定义一些CSS类,这些类包含了特定的样式规则。例如,我们有一个类名为...

    使用Javascript实现遮屏效果

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

    js calendar控件橙色的日期选择器样式代码

    同时,使用CSS类(`.class`)可以更方便地管理样式,通过`element.classList.add('className')`添加类,`element.classList.remove('className')`移除类,或`element.classList.toggle('className')`切换类。...

    js判断样式className同时增加class或删除class

    这些方法的核心在于使用正则表达式处理`className`字符串,确保添加和移除类时不会引入额外的空格或误删其他类。正则表达式`(^\s|\s)`匹配字符串开始或结束的空格,而`(^\s|\s)` + `className` + `(^\s|\s)`则匹配...

    JavaScript 拾碎[三] 使用className属性

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

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

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

    JavaScript样式.docx

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

    【JavaScript源代码】JS实现消灭星星案例.docx

    ### JavaScript 实现“消灭星星”游戏案例分析 #### 案例概述 本文将详细介绍如何使用JavaScript语言结合HTML与CSS来实现一款简单的“消灭星星”游戏。本游戏的主要功能包括: 1. 用户可以通过点击星星使其消失。 2...

    【JavaScript源代码】原生JS实现拖拽位置预览.docx

    ### JavaScript 实现拖拽位置预览技术解析 #### 技术背景 在现代Web开发中,用户交互体验是...此外,对于更高级的需求,比如拖拽过程中与其他元素的碰撞检测、动画效果等,可以结合CSS3动画或者JavaScript库来实现。

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

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

    原生js实现class的添加和删除简单代码

    这里我们将详细讲解如何使用原生JavaScript编写`hasClass`、`addClass`和`removeClass`这三个函数,用于检测、添加和移除元素的类。 首先,`hasClass`函数是用来检查一个DOM元素是否已经包含了指定的类名。这个函数...

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

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

    js鼠标提示特效

    这篇博文“js鼠标提示特效”可能介绍了一种使用JavaScript实现的动态提示效果,通过鼠标悬停或者点击事件来显示自定义的提示信息。 在JavaScript中,我们可以利用事件监听器(Event Listeners)如`mouseover`和`...

    JS实现鼠标移动到图片上显示提示内容,类似天气

    在JavaScript中,我们可以利用事件监听、DOM操作以及CSS样式来实现这一效果。 首先,我们需要在HTML中为每张图片添加一个`<title>`或`<alt>`标签,用于存储提示信息。例如: ```html 天气晴朗,温度26℃"> ``` 接...

    js鼠标经过变色

    本文将详细介绍如何利用JavaScript(简称JS)来实现这一功能。 #### 二、核心概念解析 ##### 1. 鼠标事件 - **`mouseover`**:当鼠标指针移动到指定元素上时触发。 - **`mouseout`**:当鼠标指针离开指定元素时...

Global site tag (gtag.js) - Google Analytics