zoukankan      html  css  js  c++  java
  • offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    
    </head>
    <body style="border:1px solid #ccc">
            <div id="div" style="100px;height:80px;left:10px;top:8px;position:relative;border:1px solid #ccc;margin:20px 10px;padding:7px 6px;">
            </div>
    
        <script type="text/javascript">
            var divObj = document.getElementById("div");
    
            var dOffsetWidth = divObj.offsetWidth;//返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)
            var $dOffsetWidth = $(divObj).outerWidth(false);//参数为true,包括外边距
    
            var dOffsetHeight = divObj.offsetHeight;//返回元素的高度(包括元素高度、内边距和边框,不包括外边距)
            var $dOffsetHeight = $(divObj).outerHeight(false);//参数为true,包括外边距
    
    
            var dClientWidth = divObj.clientWidth;//返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)
            var $dClientWidth = $(divObj).innerWidth();
    
            var dClientHeight = divObj.clientHeight;//返回元素的高度(包括元素高度、内边距,不包括边框和外边距)
            var $dClientHeight = $(divObj).innerHeight();
    
            var dWidth = divObj.style.width;//返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)
            var $dWidth = $(divObj).width();//width(val)设置宽
    
            var dHeight = divObj.style.height;//返回元素的高度(包括元素高度,不包括内边距、边框和外边距)
            var $dHeight = $(divObj).height();//height(val)设置高
    
            var dscrollWidth = divObj.scrollWidth;//返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同
            var dscrollHeight = divObj.scrollHeight;//返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同
    
    
            console.log("dOffsetWidth:"+dOffsetWidth+",dOffsetHeight:"+dOffsetHeight+",dClientWidth:"+dClientWidth+",dClientHeight:"+dClientHeight+",dWidth:"+dWidth+",dHeight:"+dHeight+",dscrollWidth:"+dscrollWidth+",dscrollHeight:"+dscrollHeight);
            console.log("$dOffsetWidth:"+$dOffsetWidth+",$dOffsetHeight:"+$dOffsetHeight+",$dClientWidth:"+$dClientWidth+",$dClientHeight:"+$dClientHeight+",$dWidth:"+$dWidth+",$dHeight:"+$dHeight);
    
            /*
                注意:offsetWidth(offsetHeight)与style.width(style.height)的区别
                1. style.height 返回的是字符串,如28px,offsetWidth返回的是数值28,如果需要对取得的值进行计算,用offsetWidth比较方便;如果拿到offsetWidth设置style.left的值,需加'px'。
                2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性,clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性
                3. style.height的值需要事先定义,否则取到的值为空。而且必须要定义在html里,如果定义在css里,style.height的值仍然为空,但元素偏移有效;而offsetWidth则仍能取到。
            */
    
            /*
                总结:
                1、通过style.width(style.height)或者jQuery的$(divObj).width()/$(divObj).height()获取/设置元素的宽高
                2、若要获取元素包含边框的宽度,则可通过divObj.offsetWidth/divObj.offsetHeight或jQuery的$(divObj).outerWidth(false)/$(divObj).outerHeight(false)获取
                3、通过$(divObj).outerWidth(true)/$(divObj).outerHeight(true)获取带外边距的宽度
                4、通过$(divObj).innerWidth()/$(divObj).innerHeight()获取不包含边框、不包含外边距的宽度
            */
        </script>
    </body>
    </html>

    技术交流QQ群:15129679

  • 相关阅读:
    面向安全需求的VANET信道拥塞联合控制框架
    多普勒频移
    5G-Enabled Cooperative Intelligent Vehicular (5GenCIV) Framework: When Benz Meets Marconi
    Vehicle-to-Vehicle Channel Modeling and Measurements: Recent Advances and Future Challenges
    python之对象
    python之数字类型
    python之序列
    数据库进阶
    python之coding style
    python之web开发(待续)
  • 原文地址:https://www.cnblogs.com/yeminglong/p/6158683.html
Copyright © 2011-2022 走看看