jinl's blog

上校，马孔多在下雨。

0%

JavaScript-学习笔记（7）：CSS-DOM

发表于 分类于 阅读次数： Valine：

笔记内容：

  • styele 属性
  • 检索样式
  • 改变样式

网页的结构

  • 三位一体：

    • 结构层：由 HTML 或 XHTML 之类的标记语言负责创建；
    • 表示层：由 CSS 负责完成，CSS 描述页面内容应该如何呈现；
    • 行为层：负责内容应该如何响应事件这一问题，js 和 DOM 主宰的领域。

  • 分离：

    • 使用（X）HTML 搭建文档的结构；
    • 使用 CSS 去设置文档的呈现效果；
    • 使用 DOM 脚本去实现文档的行为。

    这三种技术之间存在重叠区域。

style

style 属性 包含元素的样式，查询该属性返蜀犬吠日的是一个对象而不是一个简单的字符串。样式存在对象的属性里：

1
element.style.property;

  • 获取样式

    1
    2
    3
    4
    // 获取 style 的 color 属性：
    element.style.color;
    // 获取 style 的 font-family 属性：
    elements.style.fontFamily;

    一般样式属性的返回值与它们的设置值都采用同样的计量单位。如果果 font-size 以 em 为单位，那么返回的值也是以 em 为单位。

    style 属性只能能过内嵌的方式来获取，一旦样式在外部，则获取不到。

  • 设置样式
    style 对象的名个属性是可以读写的，可以使用赋值操作来更新样式：

    1
    element.style.property = value;

    赋值操作符可以设置任何一种样式，比如 font 之类的速记属性：

    1
    para.style.font = "2em 'times', serif";

DOM 脚本设置样式

虽然 DOM 设置样式很容易，但是在大多数场合下，应该使用 CSS 去声明样式。

  • 根据元素的位置设置样式
    找到该元素后，直接给该元素的 style 对应的属性赋值即可。

  • 根据条件反复设置样式
    找到元素后，根据条件设置样式。比如表格里隔一个行设置一个背景色，就需要根据条件设置值。

  • 响应事件
    一般最好使用 CSS 为文档设置样式，但也有一些 CSS 不能处理或者难以部署的情况，这时需要用上 DOM。比如浏览器不能识别伪类的时候，可以使用 js 来解决。

  • className 属性
    之前的都是用 DOM 直接设置或修改样式，这是直接让“行为层”干“表示层”的活。
    与其让 DOM 直接改变元素的样式，不如能过 js 更新元素的 classic 属性。

对函数进行抽象

一些函数可以做一些小小的改动可以变得更通用，这个过程叫抽象（abstraction）。
比如下面这个函数的对象仅适用于 h1 元素，以及 classname 的值为 intro 。

1
2
3
4
5
6
7
8
9
10
function styleHeaderSiblings() {
  if (!document.getElementsByTagName) return false;
  var headers = document.getElementsByTagName("h1");
  var elem;
  for (var i = 0; i < headers.length; i++) {
    // 查找下一个元素节点
    elem = getNextElement(headers[i].nextSibling);
    elem.className += "intro";
  }
}

添加两个具体的参数，就可以使其成为更通用的函数：添加 tag 和 theclass 两个参数，并把 h1 改为 tag，intro 改为 theclass。为了增加可读性，把 headers 改为 elems.

1
2
3
4
5
6
7
8
9
10
function styleHeaderSiblings(tag, theclass) {
  if (!document.getElementsByTagName) return false;
  var elems = document.getElementsByTagName(tag);
  alert(theclass);
  for (var i = 0; i < elems.length; i++) {
    // 查找下一个元素节点
    elem = getNextElement(elems[i].nextSibling);
    elem.className += " " + theclass;
  }
}

这样，函数的抽象化就完成了。
无论何时，发现函数可以抽象，都应该马上去做，这总是一个好主意。

小结

CSS-DOM 针对的是如何得到和设置 style 对象的各种属性。
style 属性不支持外部 css 设置的样式，不过仍然可以利用 style 属性去改变 html 元素的呈现效果。
不过一般都应该选择更新 classname 属性，而不是直接更新 style 对象的相关属性。
使用 js 干 css 的活无非就俩原因，一是 css 无法干这种活，二是一些残疾浏览器不支持最新属性。js 能够重复执行一组操作，这是 css 做不了的。

------------ 感谢你的阅读 ------------