class属性设置类。 我们通常使用类来对元素进行分组。
然后我们可以定位属于给定类的元素并应用CSS样式。
<element class="classname">
|
|
|
|
|
|
|---|---|---|---|---|---|
class |
Yes | Yes | Yes | Yes | Yes |
<!DOCTYPE HTML>
<html>
<body>
<a class="class1 class2" href="http://apress.com" rel="external nofollow" target="_blank" >Apress web site</a>
<p/>
<a class="class2 otherclass" href="http://w3c.org" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C web site</a>
</body>
</html>
您可以通过使用空格分隔类名称来对每个元素应用多个类。
在下面的代码中，我们创建了一个针对一个或多个类的样式。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.class2 {
background-color:grey; color:white; padding:5px; margin:2px;
}
.class1 {
font-size:x-large;
}
</style>
</head>
<body>
<a class="class1 class2" href="http://www..cn">web site</a>
<p/>
<a class="class2 otherclass" href="http://w3c.org" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C web site</a>
</body>
</html>Click to view the demo
另一种使用类属性的方法是在脚本中。
<!DOCTYPE HTML>
<html>
<body>
<a class="class1 class2" href="http://www..cn">web site</a>
<br/>
<a class="class2 otherclass" href="http://w3c.org" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C web site</a>
<script type="text/javascript">
var elems = document.getElementsByClassName("otherclass");
for (i = 0; i < elems.length; i++) {
var x = elems[i];
x.style.border = "thin solid black";
x.style.backgroundColor = "white";
x.style.color = "black";
}
</script>
</body>
</html>Click to view the demo
上面的脚本查找所有的元素已分配给 otherclass 类并应用一些样式。
HTML 音频/视频 DOM canPlayType() 方法 HTML 音频/视频 DOM 参考手册实例检测您的浏览器是否能播放不同类型的视频：myVid=docum...
HTML param value 属性HTML param 标签实例设置 autoplay 参数为 true，这样声音在页面加载时会自动开始播放：object data=horse...
HTML onload 事件属性 HTML 事件属性实例当文档加载完成后运行 JavaScript 脚本:body onload=load()浏览器支持 所有主流浏览器都...
bdi元素是指双向隔离元素。bdi 标签的开始标签和结束标签都不能省略。 实例将用户名从周围的文本方向设置中隔离出来：ulli用户 b...
caption 标签表示 HTML 表格的标题，对表格的简单描述。实例带有标题的表格：table border="1"captionMonthly savings/caption t...
C 练习实例62 C 语言经典100例题目：学习putpixel画点，（在TC中实现）。程序分析：无。程序源代码：//Created by www..cn on 15...
C 库函数 - fmod() C 标准库 - math.h描述C 库函数 double fmod(double x, double y) 返回 x 除以 y 的余数。声明下面是 fmod() ...
C 库宏 - va_start() C 标准库 - stdarg.h描述C 库宏 void va_start(va_list ap, last_arg) 初始化 ap 变量，它与 va_arg 和 va_...
