DOM2DOM3续

1.对于getComputedStyle()方法 即便浏览器支持border 但表示值的方式可能会有区别,因此在使用getComputedStyle()方法是,最好先在几个浏览器中测试下 (注):IE有个myDiv.currentStyle与之等价 以上计算的样式都是只读的。

2.应用于文档的所有样式表用document.styleSheets集合表示 。可以使用sheet = element.sheet || element.styleSheet 表示获取样式表对象的内容;这里使用这种方法返回的样式与document.styleSheets集合中的样式表对象相同

3.取得第一条规则的方法如下:var sheet = document.styleSheets[0] ;  var rules = sheet.cssRules || sheet.rules;  var rule = rules[0]; alert(rule.selectorText); alert(rule.style.width); 也可以同时对其进行设值 如rule.tyel.width = 200px;

4.跨浏览器向样式表插入规则sheet.insertRule (除IE支持) sheet.addRule(IE支持) 其中sheet的值为document.styleSheets[0]因此代码如下:

   function insertRule(sheet,selectorText,cssText,position){

      if (sheet.insertRule){

          sheet.insertRule(selectorText + "{" + cssText + "}" , position);  

      }   else  if  (sheet.addRule){

          sheet.addRule(selectorText,cssText,position);

      }

}  然后用insertRule(document.styleSheet[0],"body","200px",0);来调用 //不怎么实用

5.跨浏览器删除规则sheet.deleteRule(0)DOM方法 sheet.removeRule(0)仅对IE有效代码如下:

    function deleteRule(sheet, index){

         if(sheet.deleteRule){

            sheet.deleteRule(index);        

         } else if (sheet.removeRule) {

            sheet.removeRule(index);

         }   

    } 然后使用deleteRule(document.styleSheet[0], 0); //这个方法也不实用;

6.偏移量 有4个属性取得元素的偏移量offsetHeight:元素在垂直方向上占用的空间大小,以像素计。包括元素的高度,(可见的)水平滚动条的高度、上边框高度和下边框高度 offsetWidth:元素在水平方向上占用的空间大小,以像素计。包括元素的宽度,(可见的)水平滚动条的宽度、左边框宽度和右边框宽度 offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离 offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离  以上的属性都是只读的,每次访问都要重新计算

7.客户区大小:是元素内容及其内边距所占据的大小有关属性有clientWidth和clientHeight 他们不包括边框的大小。以上的属性都是只读的,每次访问都要重新计算

8.滚动大小:指包含滚动内容的元素大小。属性有scrollHeight scrollWidth(在没有滚动条的情况下,为元素内容的总高度和总宽度) scrollLeft 和scrollTop:被隐藏内容区域左侧或上方的像素数 可以通过设置这个属性改变元素的滚动位置 。实例如下

  <body>
<div style="200px;height:200px;background-color:orange;overflow:auto;" id="ep">
    <div style="100px;height:300px;background-color:green;" id="ip">  
       这些文字显示在内层元素中。
    </div>
</div>
<p>scrollTop值是:<span id="stValue"></span></p>
<p>
<input type="button" onclick="div_ep.scrollTop = 50; disp();" value="把scrollTop设为50" />
<input type="button" onclick="div_ep.scrollTop = 500; disp();" value="把scrollTop设为500" />
</p>
<p>
wst:<input type="text" id="wst" value="" />
<input type="button" onclick="wstz()" name="设置scrollTop的值" value="确定" />
</p>
<script type="text/javascript">
    //注意()里头要加""号
   var div_ep = document.getElementById("ep");
   var span_stValue = document.getElementById("stValue");
   function disp(){
      span_stValue.innerHTML = div_ep.scrollTop;
   }
   disp();
   function wstz() {
     if("" != document.getElementById("wst").value){
         div_ep.scrollTop = document.getElementById("wst").value;
         disp();
     } else
         alert("请输入一个数值");
   }
   //注意橙色的一块没有动
</script>

原文地址:https://www.cnblogs.com/luhangnote/p/2640044.html