JavaScript DOM2和DOM3——“样式”的注意要点

层次：
访问style对象：

• style对象是CSSStyleDeclaration的实例；

• getComputedStyle方法也返回CSSStyleDeclaration的实例；

访问样式表：

• 元素包含的样式表由HTMLLinkElement表示；

• this is a paragraph.

  length属性

  style的属性，length的目的，就是将其与item()方法配套使用，以便迭代在元素中定义的CSS属性。如：

  
      
  this is a paragraph.
      
  
  

  getPropertyValue()方法

  style的属性，可以使用属性名进一步取得属性的值。如：

  
      
  this is a paragraph.
      
  
  

  getPropertyCSSValue()方法

  style属性，返回一个包含两个属性的CSSValue对象，这两个属性分别是cssText和cssValueType。其中，cssText属性的值与getPropertyValue()返回的值相同，而cssValueType属性则是一个数值常量，表示值的类型：0为继承的值；1为基本的值；2为列表；3为自定义的值。如下面的代码即输出CSS属性值，也输出值的类型：

  var p = document.getElementById("p");
  var i, prop;
  for (i = 0, len = p.style.length; i < len; i++) {
      prop = p.style[i];
      value = p.style.getPropertyCSSValue(prop);
      console.log(prop + ":" + value.cssText + "," + value.cssValueType);
      // [Log] color:red,1 (testingjs.js, line 6)
      // [Log] font-family:monospace,2 (testingjs.js, line 6)
  }
  

  或许兼容性有问题，这个代码在chrome中运行不了。不过，此方法不常用，一般都是用getPropertyValue()方法

  removeProperty()方法

  该属性的目的是要移除某个CSS属性。如：

  var p = document.getElementById("p");
  p.style.removeProperty("color");
  

  setProperty()方法

  该属性的目的是要添加某个CSS属性。如：

  var p = document.getElementById("p");
  console.log(p.style.setProperty("color","orange"));
  

  计算的样式getComputedStyle()方法和currentStyle属性

  前者是增强了document.defaultView，这个方法接收两个参数：计算样式的元素以及一个伪元素字符串（如:after）。如果不需要伪元素信息，第二个值设置为null即可。该方法返回一个CSSStyleDeclaration对象，以下面代码为例：

  使用getComputedStyle()方法，用法是document.defaultView.getComputedStyle()返回CSSStyleDeclaration实例：

  var myDiv = document.getElementById("myDiv");
  var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
  console.log(computedStyle.length); //263
  console.log(myDiv.style.length); //18
  console.log(computedStyle.backgroundColor); //rgb(255,0,0)
  console.log(computedStyle.border); //1px solid rgb(0, 0, 0)
  console.log(computedStyle.width + computedStyle.height); //100px200px
  

  currentStyle属性则是用在IE上的，与上述类似。用法是element.currentStyle返回CSSStyleDeclaration实例。

  操作表样式

  CSSStyleSheet类型表示的是样式表，包括link元素包含的样式表和在style元素中定义的样式表。这两个元素本身是由HTMLLinkElement和HTMLStyleElement类型表示的。但是CSSStyleSheet类型相对更加通用一些，它只表示样式表，而不管这些样式表在HTML中是如何定义的。CSSStyleSheet继承自StyleSheet，接口属性如下：

  • disabled：表示样式表是否被禁用的布尔值；

  • href：如果是link元素表示的样式表，则是样式表的URL，否则是null；

  • media：当前样式表支持的所有媒体类型的集合，可用length属性和item()方法，在IE中返回字符串；

  • ownerNode：指向拥有当前样式表的节点的指针；IE不支持；

  • parentStyleSheet：如果样式表是通过@import导入的，这个属性是一个指向导入它的样式表的指针；

  • title：ownerNode中title值；

  • type：样式表类型的字符串，一般是“type/css”；

  CSSStyleSheet类型还支持下面的属性和方法：

  • cssRules：样式表中包含的样式规则的集合。IE不支持但有个类似的rules；

  • ownerRule：样式表是通过@import导入的，这个属性就是一个指针，指向表示导入的规则；否则为null；IE不支持；

  • deleteRule(index)：删除cssRules集合中指定位置的规则；IE不支持但有个类似的removeRule()方法；

  • insertRule(rule,index)：向cssRules集合中指定的位置插入rule字符串，IE不支持但有个类似的addRule()方法；

  应用于文档中的所有样式表是通过document.styleSheets集合来表示的。

  另外，也可以直接通过link元素和style元素取得CSSStyleSheet对象。DOM规定了一个包含CSSStyleSheet对象的属性，名叫sheet；在IE，可以使用styleSheet属性。如：

  console.log(document.getElementsByTagName("style")[0].sheet); //CSSStyleSheet对象
  console.log(document.getElementsByTagName("style")[0].styleSheet); //CSSStyleSheet对象 只用于IE
  console.log(document.styleSheets[0]); //同样也是CSSStyleSheet对象
  

  CSS规则

  层次梳理：

  console.log(document.styleSheets); //StyleSheetList对象 该行代码包含着所有包括link元素和style元素的样式表
  console.log(document.styleSheets[0].cssRules); //CSSRuleList对象 该行代码包含着第一个样式表中的所有规则
  console.log(document.styleSheets[0].cssRules[0]); //CSSStyleRule对象 该行代码表示第一个样式表中的第一条规则 可通过cssText属性访问
  

  CSSRule对象表示样式表中的每一条规则：

  • cssText：返回整条规则对应的文本；IE不支持；

  • parrentRule：如果是导入的规则，这个属性引入的就是导入规则否则为null；

  • parentStyleSheet：当前规则所属的样式表，IE不支持；

  • selectorText：返回当前规则的选择符文本；

  • style：可以通过它设置和取得规则中特性的样式值；是一个CSSStyleDeclaration对象；

  • type：规则类型的常量值，对于样式规则，这个值是1；IE不支持；

  比较常用的属性是：cssText、selectorText、style。另外，cssText是只读的，但是style.cssText则是读写的。

  以下面的代码为例：

  script代码如下：

  var sheet = document.getElementsByTagName("style")[0].sheet; //获得第一个stylesheet
  var rule = sheet.rules[0]; //获得该样式表中第一条规则
  
  console.log(rule.cssText); //#myDiv { width: 100px; height: 200px; background-color: blue; }（获得该规则对应的文本）
  console.log(rule.selectorText); //#myDiv（该规则的选择符文本）
  
  console.log(rule.style); //CSSStyleDeclaration
  console.log(rule.style[0]); //background-color（取得该规则中特定的样式值）
  console.log(rule.style[1]); //width
  

  另外，可以用style的方式修改样式信息：

  var sheet = document.getElementsByTagName("style")[0].sheet;
  var targetRule = sheet.rules[0];
  targetRule.style.height = "300px";
  

  创建规则

  insertRule()方法，向现有样式表中添加新规则；接收两个参数：规则文本和插入规则的索引。IE8及更早的的浏览器支持类似的方法：addRule()，接收两个必选参数：选择符文本、CSS样式信息和一个可选参数：插入规则的位置；

  删除规则

  deleteRule()方法，接收一个参数：要删除的规则的位置，IE中用removeRule()方法

  元素大小

  DOM中没有规定如何确定页面中元素的大小，IE为此率先引入了一些属性。

  偏移量

  • offsetHeight：垂直方向上占用的空间大小；

  • offsetWidth：水平方向上占用的空间大小；

  • offsetLeft：左外边框至包含元素的左内边框之间的像素距离；

  • offsetTop：上外边框至包含元素的上内边框之间的像素距离；

  如下面的div元素:

  script:

  var div = document.getElementById("myDiv");
  console.log(div.offsetHeight); //122 包括了100px的高度、2个1px的border、2个10px的padding，共122px
  console.log(div.offsetWidth); //112 包括了80px的高度、2个1px的border、1个10px的padding和1个20px的padding-left，共112px
  console.log(div.offsetLeft); //10 包括了10px的margin
  console.log(div.offsetTop); //20 包括了20px的margin-top
  

  对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。

  offsetParent属性，该属性不一定与parentNode值相等，可能是body也有可能是table；要想知道某个元素在页面上的偏移量，用下面函数：

  
      
  
          
  
      
      
  
          
  
              
  th1
              
  th2
          
          
  
              
  td1
              
  td2
          
      
      
  
  

  对于使用表格和内嵌框架布局的页面，不同浏览器实现这些元素的方式不同，得到的值不会太准确。

  客户区大小

  指的是内容及内边距所占据的空间大小：clientWidth、clientHeight；如：

  
  
  console.log(div.clientHeight); //120 height加上padding，不包括margin和border
  console.log(div.clientWidth); //110 width加上padding，不包括margin和border
  

  又如使用该属性取得浏览器视口大小：

  var div = document.getElementById("myDiv");
  function getViewport() {
      if (document.compatMode == "BackCompat") {
          return {
              width: document.body.clientWidth,
              height: document.body.clientHeight
          };
  
      } else {
          return {
              width: document.documentElement.clientWidth,
              height: document.documentElement.clientHeight
          };
      }
  }
  console.log(getViewport()); //{width: 1280 height: 913}
  

  滚动大小

  指的是包含滚动内容的元素的大小：

  • scrollHeight：在没有滚动条的情况下，元素内容的总高度；

  • scrollWidth：在没有滚动条的情况下，元素内容的总宽度；

  • scrollLeft：被隐藏在内容区域左侧的像素数；

  • scrollTop：被隐藏在内容区域上方的像素数；

  如：

  #pId{
          width: 100px;
          height: 100px;
          border: 1px solid gray;
          overflow: scroll;
      }
  
  thisisamessage.thisisamessage.thisisamessage.
      thisisamessage.thisisamessage.
      thisisamessage.
      thisisamessage.
      thisisamessage.
      thisisamessage.thisisamessage.
      thisisamessage.thisisamessage.thisisamessage.thisisamessage.thisisamessage.thisisamessage.thisisamessage.
  
  
  var x = document.getElementById("pId");
  var t = setTimeout(echoo, 1000);
  function echoo() {
      console.log(x.scrollLeft);
      var y = setTimeout(echoo, 1000);
  }
  

  另外，带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。

  在不包含滚动条的页面而言，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系并不是分清晰。一些浏览器会出现不一致问题，如：

  • Firefox 中这两组属性是相等的，大小代表的是文档内容区域的实际尺寸，非视口尺寸；

  • Opera、Safari >= 3.1、Chrome中这两组属性是有差别的，s...是视口大小，c...是文档内容区域的大小；

  • IE在标准模式下，s...是内容区域大小，c...是视口大小；

  要确定文档的总高度时，必须取得s...或c...之间的最大值（Math.max），如：

  var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
  console.log(docHeight); //913
  var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.scrollWidth);
  console.log(docWidth); //1280
  

  下面的函数会检测元素是否位于顶部，如果不是就会将其自动滚到顶部：

  #pId{
          width: 150px;
          height: 200px;
          border: 1px solid gray;
          overflow: scroll;
      }
  
  HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
  
  
  var pElem = document.getElementById("pId");
  var btn = document.getElementById("stt");
  
  btn.onclick = scrollToTop;
  
  function scrollToTop() {
      if (pElem.scrollTop !== 0) {
          pElem.scrollTop = 0;
      }
  }
  

  确定元素大小

  getBoundingClientRect()方法会返回一个矩形对象，包含4个属性：left、top、right和bottom：

  var p = document.getElementById("divId");
  console.log(p.getBoundingClientRect().right); //110
  console.log(p.getBoundingClientRect().left); //10
  console.log(p.getBoundingClientRect().top); //10
  console.log(p.getBoundingClientRect().bottom); //60
  

  注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

  document.documentElement.clientTop; // 非IE为0，IE为2
  document.documentElement.clientLeft; // 非IE为0，IE为2
  functiongGetRect(element) {
      var rect = element.getBoundingClientRect();
      var top = document.documentElement.clientTop;
      var left = document.documentElement.clientLeft;
      return {
          top: rect.top - top,
          bottom: rect.bottom - top,
          left: rect.left - left,
          right: rect.right - left
      }
  
  }