前台脚本中,我们经常要操作页面元素的样式,比如标签页切换时,将当前标签加上一个样式,当切换到其他标签时,再将样式还原,本文介绍的是直接添加和移除 className 的方法。
Javascript:
-
<script type="text/javascript">
-
-
// 说明:添加、移除、检测 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,' ');
-
}
-
}
-
</script>
分享到:
相关推荐
在前台脚本中,我们经常要操作页面元素的样式,比如标签页切换时,将当前标签加上一个样式,当切换到其他标签时,再将样式还原,本文介绍的是直接添加和移除 className 的方法。
方法1:使用className属性; 方法2:使用classList API; //用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)'+name+'(\\s+|$)'); } //hasClass addClass removeClass toogleClass var ...
需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。 调用方法: 如果改变className,则事先在样式表中申明类,但...
本文实例为大家分享了JavaScript实现经典贪吃蛇游戏的具体代码,供大家参考,具体内容如下 主要使用单例模式,所有元素动态创建; 1.创建地图 var Map; function map(){ this.mapp=null; this.makemap=...
使用封装的思想,简单的实现IE浏览器在javascript中对getElementsByClassName的不兼容问题,实现的方法简单,通俗易懂
javascript通过className获取文件元素.docx
B 使用className 属性 Javascript 还可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。 代码示例: 代码如下: <html> <head> <title>追加CSS类别</title
本文实例讲述了javascript动态设置样式style的方法。分享给大家供大家参考。具体分析如下: 动态修改style 1.易错:修改元素的样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用”style.属性...
其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了...
多个DIV,所有的DIV都由JavaScript生成,每个DIV的className均为photo,再通过数组来操控每个DIV的display属性,最后用定时器完成轮播图
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和Text属性
<!-- s --> <LI class=step_1>1....<LI class=step_2>2....<LI class=step_3>3....<LI class=step_4>4....<LI class=step_5>5.... document.getElementById('step_div').className='flow_step_no'+step; } </script>
5.3.2 基于className切换样式 5.3.3 切换样式表 5.3.4 修改CSS规则 5.4 访问计算样式 5.5 Microsoft的filter属性 5.6 实例:简单的渐变效果 5.7 小结 第6章 案例研究:图像...
使用className设置样式 27 3. 继承机制实现 27 (1) 继承的方式 27 (2) 继承方式1—对象冒充 27 (3) 继承方式2—call()方法与apply()方法 28 call()方法 28 apply()方法 28 (4) 继承方式3—原型链...
javaScript给元素添加多个class的简单实现 <html> <head> <style type="text/css"> .div2{ font-size:16px; color:orange; } .div3{ font-size:20px; color:blue; } <...
react-body-classname, 声明性嵌套状态化同构的body.className react-body-classname 提供在 React App 中指定 document.body.className的声明方式。 支持服务器端使用。内置的反应副作用。安装yarn add react-bo
本文实例讲述了JavaScript实现获取dom中class的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></...