zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    123457123457#0#-----com.tym.YuErBaiKeTYM--前拼后广--育儿百科
    123457123456#0#-----com.tym.XueYingYu01--前拼后广--小学英语tym
    123457123456#0#-----com.cym.shuXue02--前拼后广--开心学数学
    Spring事务失效的2种情况
    算法之排序
    JDK、Spring和Mybatis中使用到的设计模式
    MyBatis中#{}和${}的区别详解
    Redis为什么这么快
    java多线程之ScheduleThreadPoolExecutor
    java多线程之ThreadPoolExecutor
  • 原文地址:https://www.cnblogs.com/luhangnote/p/2640044.html
Copyright © 2011-2022 走看看