JavaScript更改class和id的方法


Posted in Javascript onOctober 10, 2008

是className,可不是class

注意JavaScript使用的是className去访问class属性,因为class是一个保留关键字,因为将来JavaScript可能开始支持像Java一样的类。

我们在讨论style属性时遇到了棘手的细节问题和浏览器差异性带来的麻烦,正如同经历一场惊涛骇浪。而class和id的更改则像是沙漠里一片平静的绿洲,浏览器们在这里和谐相处。思考这个例子:

p {

color: #000000; /* black */

}

p.emphasis {

color: #cc0000; /* red */

}

<p id="test">Test</p>

最初,该段落没有定义class,所以它的字体颜色是黑色。不过,一行JavaScript就足以改变它的样式:

document.getElementById('test').className = 'emphasis';

瞬间文字变成了红色。如果想要改变回来,你可以按如下操作:

document.getElementById('test').className = '';

你移除了样式,该段落恢复到默认的p{}规则。

对于一个实际应用中的例子,看看“限长的文本输入区”。计数器有这样的结构和呈现样式(该结构由JavaScript动态生成,不过那不影响这个例子):

<div class="counter"><span>12</span>/1250</div>

div.counter {

font-size: 80%;

padding-left: 10px;

}

span.toomuch {

font-weight: 600;

color: #cc0000;

}

当脚本发现用户输入的文字一定达到了最大长度,它修改作为计数器的<span>的class为toomuch:

[限长的文本输入区,第20~23行]

if (currentLength > maxLength)

this.relatedElement.className = 'toomuch';

else

this.relatedElement.className = '';

现在,作为计数器的<span>字体变成粗体和红色。

id的变更以几乎完全一样的方式工作:

p {

color: #000000; /* black */

}

p#emphasis {

color: #cc0000; /* red */

}

<p>Test</p>

document.getElementsByTagName('p')[0].id = 'emphasis';

该段落的文字再次变成了红色。但是,我建议你不要过多改变id。除了作为CSS的钩子,它们也常常作为JavaScript的钩子,改变它们可能存在不确定的副作用。

增加class

通常,你不会给一个元素的class设置新值,而只是添加一个class。因为你不希望移除元素已经拥有的任何样式。因为CSS允许复合样式,新class所包含的样式被添加到元素上,不会移除任何已经存在的class的CSS指令。

“表单验证”中的writeError()和removeError()函数是一个很好的例子。一般来说我会给表单域应用好几个class,因为图形设计师经常对输入框使用两个甚至三个宽度。当一个表单域包含错误的时候,我希望添加一个特别的警告样式,但我不希望搅乱该元素已经拥有的样式。所以,我不能简单地覆盖旧的class值,那样我将失去已经指定的宽度。

看这样的情形:

<input class="smaller" name="name" />

input.smaller {

width: 75px;

}

input.errorMessage {

border-color: #cc0000;

}

最开始,输入框的宽度是75px。如果脚本设置class为'errorMessage'并且删除旧值,表单域会得到一个红色的边框,但也失去了它的宽度,而那样的话可能会让用户感到非常迷惑。

因此,我是添加了errorMessage class:

[表单验证,第105~106行]

function writeError(obj,message) {

obj.className += ' errorMessage';

这段代码取得已存在的className并在其后附加一个新的class,在它之前加一个空格。这个空格分隔新的class和任何对象可能已经拥有的class值。现在输入框除了拥有75px宽度之外,如我们所愿地得到了红色边框。该表单域现在应用了两个class,HTML就好像这样:

<input class="smaller errorMessage" name="name" />

Class在Mozilla中的名称与空白

你可能注意到removeError()移除class的值errorMessage的时候没有前置的空格。那是因为一个浏览器的bug。当你添加errorMessage到一个原来没有值的class的时候,Mozilla会删除前置空格。如果我们随后执行replace(/ errorMessage/,''),Mozilla不能移除class,它找不到字符串errorMessage,因为前置空格已经不在了。

移除class

一旦用户修正了她的错误,class的值errorMessage应该被移除,但任何原来的class,比如smaller,不应该受到影响。removeError()函数提供了这个功能:

[表单验证,第119~120行]

function removeError() {

this.className = this.className.replace(/errorMessage/,'');

它先取得元素的class然后替换字符串'errorMessage'为''(一个空字符)。errorMessage从class的值中被取走,但对其他的值没有影响。表单域失去了红色的边框颜色,但依然维持75px的宽度。

Javascript 相关文章推荐
JS 进度条效果实现代码整理
May 21 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
javascript流程控制语句集合
Sep 18 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
js闭包学习心得总结
Apr 17 Javascript
ppk谈JavaScript style属性
Oct 10 #Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 #Javascript
执行iframe中的javascript方法
Oct 07 #Javascript
JS版网站风格切换实例代码
Oct 06 #Javascript
判断JavaScript对象是否可用的最正确方法分析
Oct 03 #Javascript
IE与firefox之jquery用法区别
Oct 03 #Javascript
jquery的颜色选择插件实例代码
Oct 02 #Javascript
You might like
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
用jscript启动sqlserver
2007/06/21 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python实现简单的计时器功能函数
2015/03/14 Python
python实现将元祖转换成数组的方法
2015/05/04 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
python中什么是面向对象
2020/06/11 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
教师师德承诺书
2014/03/26 职场文书
学习保证书范文
2014/04/30 职场文书
大专学生求职信
2014/07/04 职场文书
战略合作意向书
2014/07/29 职场文书
2015年端午节活动总结
2015/02/11 职场文书
2016七夕情人节寄语
2015/12/04 职场文书