DOM-CSS

"">


 
 
 


 

An example of a paragraph
 

  紫色字体部分使用dom改变了文本段原有的样式。这就是DOM向CSS领域的入侵。另外CSS采用Camel记号来表示那些名字里有多个单词的css属性，即说CSS属性font-family在DOM脚本中应该写成fontFamily。
  有时，DOM对样式属性的检索结果与它们的CSS设置值会采用不同的计量单位
 

  使用alert(para.style.color);将会显示(153,153,153).
  还好这中中情况并不多见。
 
  CSS还提供了一次声明多个样式的多用途属性，比如说你声明了font:12px 'Arial',sans-serif,CSS将font-size设置为12px，font-family设置为'Arial'，sans-serif；
  DOM能够理解font这样的多用途属性，如果查询fontSize属性将得到一个12px的值：alert（“The font size is ”+para.style.fontSize）;
 
----------------------------------------------------------
  通过style属性检索样式信息有个很多大的局限性，style属性只能返回那些内嵌在HTML内容里的样式信息。即如下的情况：
 

  而这不是设置样式信息的最佳方式，结构和表示混杂在一起了。创建style.css文件写入以下内容：
  p#example{
    color:grey;
    font:12px 'Arial',sans-serif;
  }
  并在example.html文件开头部分加上一个link元素并让它指向style.css文件。
  如果将样式信息保存在部分的
  对于以上两种声明样式的方式，样式信息不会进入到style对象中。
  由上可见DOM在CSS方面的用武之地在于用DOM设置样式信息，并用DOM检索样式信息.

9.3何时应该用DOM脚本去设置样式信息
  1，根据元素在节点树中的位置来设置样式信息
  至少在目前我们还不能用CSS根据某个元素在节点数中的位置来为它声明一种样式。比如要为所有h1文本段后面的第一个元素节点设置样式。
 

 "">

 
   
   
   
   
   
 
 
   

Hold the front page

   

This first paragraph leads you in.

   

Now you get the nitty-gritty of the story.

   

The most important information is delivered first.

   

Extra! Extra!

   

Further developments are unfolding.

   

You can read all about it here.

 

 

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

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

 
  9.3。2根据某种条件来设置样式信息
    这种情况多发生在使用表格的情况。为了使表格的内容更加醒目，可以间 
  行的转换表格的颜色。

  function stripeTables() {
  if (!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  for (var i=0; i    var odd = false;
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j
      if (odd == true) {
        //rows[j].style.backgroundColor=...
        addClass(rows[j],"odd");
        odd = false;
      } else {
        odd = true;
      }
    }
  }
}
function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}
addLoadEvent(stripeTables);

  3，需要对某种时间作出反应。比如当鼠标停留在某个链接上面时，需要该链接改变颜色。对这种情况而言，使用CSS提供的伪属性:hover基本上能满足，因为这个属性得到了大多数browser的支持。但如果：
  tr:hover{
    font-weight:bold;
  }
  这种效果只能在一部分浏览器中看到。而如果使用DOM则可以确保你的想法实现。
 

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

  9.4 前面都是通过DOM直接设置style属性来实现样式的改变的，这是一种不好的做法。因为行为层介入到了结构层中。
  使用className属性，通过DOM改变一个元素的class属性，并在相应的.css文件中设置该class的样式。这时一种更为良好的做法。
 

for (var j=0; j      if (odd == true) {
        addClass(rows[j],"odd");
        odd = false;
      } else {
        odd = true;
      }
    }
  }
}
function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}
class为odd对应的样式设置：
.odd{
  background-color:#ffc;
}