开发学院网页设计JavaScript JavaScript更改class和id的方法 阅读

JavaScript更改class和id的方法

 2010-09-14 13:28:30 来源:WEB开发网   
核心提示:是className,可不是class注意JavaScript使用的是className去访问class属性,JavaScript更改class和id的方法,因为class是一个保留关键字,因为将来JavaScript可能开始支持像Java一样的类,它修改作为计数器的<span>的class为toomuch

是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>字体变成粗体和红色。

1 2  下一页

Tags:JavaScript 更改 class

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接