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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JavaScript如何对图片进行黑白化
Apr 10 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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
php数组去重实例及分析
2013/11/26 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
json2.js的初步学习与了解
2011/10/06 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
简历中求职的个人自我评价
2013/12/03 职场文书
教学大赛获奖感言
2014/01/15 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
农村老人去世追悼词
2015/06/23 职场文书
个人工作决心书
2015/09/22 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
nginx常用配置conf的示例代码详解
2022/03/21 Servers