登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

pcwanli的博客

nx

 
 
 

日志

 
 

JavaScript更改class和id的方法  

2011-01-21 17:15:10|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

是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的宽度
  评论这张
 
阅读(587)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018