javascript dom编程艺术学习笔记之CSS-DOM

javascript dom编程艺术学习笔记之CSS-DOM

@(JavaScript)[学习笔记]

---

[TOC]

---

1.三位一体的网页

网页由如下三层信息构成一个共同体

• 结构层
• 表示层
• 行为层 结构层 有HTML或XHTML之类的标记语言建立 表示层 由CSS完成。描述页面如何呈现 行为层 负责内容如何响应事件这一问题，由javascript和DOM构成 分离 三种技术之间有潜在重叠的区域。例如能够用dom建立标记 css利用伪类走进DOM领地

2.stytle属性

每一个元素节点都有一个属性stytle。stytle属性包含着元素的样式，查询这个对象将返回一个对象而不是一个字符串。

element.stytle.property

2.1 获取样式

element.stytle.color获取对象的color属性 font-family不能这样获取，由于链接字符与减法操做符相同，javascript会解释为减法 DOM要求使用驼峰命名法来命名中间带有减号的CSS属性 例如：element.stytle.fontFamily DOM表示样式属性采用的单位并不老是和CSS样表设置的相同 例如：把color的属性值改成#999999，在某些浏览器中会以rgb的方式返回 CSS速记属性能够把多个样式组合一块儿写成一行font: 12px 'Arial' , sans-serif; DOM能解析这样的速记 stytle属性只能返回内嵌样式不符合平稳退化原则 有另外一种状况可让stytle属性正确反射咱们设置的样式

2.2 设置样式

许多属性是只读的，stytle对象的各个属性就是读写的 能够给属性赋值para.stytle.font = "2em 'Tiems' ,serif"

3. 什么时候用DOM脚本设置样式

3.1 根据元素在节点树的位置来设置样式

CSS没法根据元素的相对位置关系找出某个特定的元素，DOM能够作到

function styleHeaderSiblings() {
  if (!document.getElementsByTagName) return false;
  var headers = document.getElementsByTagName("h1");
  for (var i=0; i<headers.length; i++) {
    var elem = getNextElement(headers[i].nextSibling);
    addClass(elem,"intro");
  }
  function getNextElement(node) {
  if(node.nodeType == 1) {
	return node;
  }
  if (node.nextSibling) {
    return getNextElement(node.nextSibling);
  }
  return null;
}
addLoadEvent(styleHeaderSiblings);

理论上讲应该用类样式来设置。若是内容须要按期编辑和刷新，添加class就成为一种负担

3.2 根据某种条件反复设置某种样式

标记语言

<table>
    <caption>Itinerary</caption>
    <thead>
    <tr>
      <th>When</th>
      <th>Where</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>June 9th</td>
      <td>Portland, <abbr title="Oregon">OR</abbr></td>
    </tr>
    <tr>
      <td>June 10th</td>
      <td>Seattle, <abbr title="Washington">WA</abbr></td>
    </tr>
    <tr>
      <td>June 12th</td>
      <td>Sacramento, <abbr title="California">CA</abbr></td>
    </tr>
    </tbody>
  </table>

若支持CSS3，很简单两行就能够设置成功 能够用javascript编写函数设置斑马线效果，只须要隔行设置样式就ok

• 找出文档中全部table元素
• 对每一个table元素，建立odd变量把它初始化为false
• 遍历表格的全部数据行
• 若是变量odd的值是true，设置样式并把odd变量修改成false
• 若是变量odd的值是false，不设置样式，把odd变量修改成true

function stripeTables() {
  if (!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  for (var i=0; i<tables.length; i++) {
    var odd = false;
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j<rows.length; j++) {
      if (odd == true) {
        rows[j].stytle.backgroundColor = '#ffc';
        odd = false;
      } else {
        odd = true;
      }
    }
  }
}

有一个问题，table每一行都被设置为false，如何交替？

3.3 响应事件

CSS提供伪类根据元素状态改变样式，DOM也能够经过onmouseover等事件对html响应。 很难判断使用那个 若是只是想让连接在鼠标指针悬停改变颜色，能够用CSS 若是鼠标悬停加粗，部分浏览器能够用CSS加粗，DOM却均可以获得公平对待

function highlightRows() {
  if(!document.getElementsByTagName) return false;
  var rows = document.getElementsByTagName("tr");
  for (var i=0; i<rows.length; i++) {
    rows[i].onmouseover = function() {
      this.style.fontWeight = "bold";
    }
    rows[i].onmouseout = function() {
      this.style.fontWeight = "normal";
    }
  }
}
addLoadEvent(highlightRows);

考虑使用CSS仍是DOM

• 这个问题最简单的解决方案是什么
• 哪一种解决方案获得更多浏览器支持

4. className属性

与其使用DOM更改样式，不如使用javascript更新元素的属性

function styleHeaderSiblings() {
  if (!document.getElementsByTagName) return false;
  var headers = document.getElementsByTagName("h1");
  for (var i=0; i<headers.length; i++) {
    var elem = getNextElement(headers[i].nextSibling);
    elem.stytle.fontWeight = "bold";
    elem.stytle.fontSize = "1.2em";
  }
}

若是修改CSS的字号，就不得不去改这个函数 若是引用一个外部样式表，针对.intro类样式声明 你只须要把紧跟一级标题后的元素设置为intro就能够达到目的。 能够用setAttribute方法来作这件事

elem.setAttribute("class", "intro");

更简单的方法是更新className属性

function styleHeaderSiblings() {
  if (!document.getElementsByTagName) return false;
  var headers = document.getElementsByTagName("h1");
  for (var i=0; i<headers.length; i++) {
    var elem = getNextElement(headers[i].nextSibling);
	**elem.className = "intro";**
  }
}

这个技巧有个不足，className会把原来的属性替换掉，而不是追加原有的class设置 咱们须要追加效果elem.className += " intro"; 操做步骤以下：

• 检查className属性值是否为null
• 若是是，把新的class直接赋值给className
• 若是不是，把一个空格和新的值追加到className属性上

function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    element.className+= " ";
    element.className+= value;
  }
}

5. 对函数进行抽象

把一个很是具体的东西改进为一个较为通用的东西叫抽象 stytleHeaderSiblings函数中，能够传递给两个形参，tag和theClass 这样会很通用