CSS-DOM设计style属性的艺术

最新推荐文章于 2024-09-10 10:26:23 发布

BigoSprite

最新推荐文章于 2024-09-10 10:26:23 发布

阅读量891

点赞数

分类专栏： Javascript学习笔记文章标签： dom style javascript css html

本文链接：https://blog.csdn.net/iFuMI/article/details/51886722

版权

Javascript学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

在JavaScript DOM编程艺术（第2版）第9章 CSS-DOM中：文档中每个元素都是一个对象，每个对象有着各种各样的属性。有一些属性告诉我们元素在节点树上的位置（比如：parentNode、nextSibling、previousSibling、childNodes、firstChild和lastChild等），有些属性包含元素自身信息（如：nodeType、nodeName等），除此之外，文档的每个元素节点还都有一个属性style。style属性包含着元素的样式，样式都存放在对象的属性中：element.style.property——可读；element.style.property = value——可写。注意：style的属性的值value必须是string类型，必须放在引号里，单引号或双引号都可。那么我们如何简单粗暴的使用style属性来让我们的页面美观呢？客官请往下看：

示例

下面是内嵌样式<p>元素的一个例子：

<p id="example" style="color: blue; font-family: 'Arial',sans-serif"></p>

我们可以这样操作它：

// 下面的代码要写在JavaScript文件/块中
// 可读——获取样式
$("#example").style.color
$("example").style.fontFamily  // .font-family WRONG!

// 可写——设置样式，以color为例
$("#example").style.color = "red";// 或者 'red'

这里要强调的是：1. color的属性的值需要为string类型，即属性值需要放在引号中，单双引号均可。2. 当你需要引用一个中间带减号的CSS属性时，DOM要求你用驼峰命名法。3. style属性只能返回内嵌样式，简单粗暴的讲：我们只能操作插入到html标记中的CSS style属性。

改进

既然使用内嵌样式有着很大的局限，并且也会使得表现的信息和结构混在一起，这是一种紧耦合的设计方法——适合比较小的代码中，但这无论如何都破坏了代码的设计原则——松耦合，分离。那么我们应该使用哪种方法呢？你可以在html中<head>部分的<style>中添加样式，下面是代码示例：

<head>
<style type="text/css">
	#example {
		color: blue;
		font-family: 'Arial',sans-serif;
	}
</style>
</head>
<body>
	<p id="example"></p>
</body>

这是一种较内嵌样式好得一种外部样式。但DOM style属性提取不到如此设置的样式，也就是说$("#example").style.color等将失效，因为它只适用于内嵌样式。那么更好的方法是把<style>标签中的样式代码单独的存入*.css文件中，它使得样式和html结构分离，但请注意这样的设置仍然是外部样式，因此style仍然获取不到如此设置的样式。我们应该清楚每种设计的利弊，这样我们就可以选择适合需求的设计。既然外部样式能够解决内嵌样式带来的局限性，并符合设计的分离（松耦合）原则，那么我们应该对外部样式做出怎样的改进以使得完美？

何时该用DOM脚本设置样式

你已经看到，用DOM设置样式是多么容易，但我们能做的往往不是应该做的。在绝大多数场合，还是应该使用CSS来声明样式。不过，在使用CSS不方便的场合，还是可以利用DOM对文档的样式做一些小的增强。下面是我们常用的通过CSS声明来设置样式：

* {// 所有

}

#id_name {// 通过id

}

.class_name {// 通过类

}

body, p {// 通过标签

}

ul li {// 为ul标签下的所有li设置样式

}

有时候我们用下面的做法：

a:link    {color:blue;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}

这是什么？W3C中这个例子说明了一切。CSS提供的:hover等为class属性允许我们根据HTML元素的状态来改变样式。DOM也可以使用onmouseover等事件对HTML元素的状态变化做出响应。但很难判断何时该使用onmouseover等，最简单的方法就是使用CSS样式表，就像那个例子一样，不论鼠标何时移动到链接上，就会触发:hover，这为选择困难症患者带来福音。这里要说的是：只要有可能，最好使用CSS为文档设置样式，当CSS遇到难以处理或难以部署的情况，别忘记使用DOM。