javascript 和 jQuery 中的各种 width

javascript

<body>
    <div id="box"></div>
    <style>
        #box{
            width:200px;
            height:100px;
            padding:5px;
            border:1px solid red;
            margin:10px auto;
        }
    </style>
    
    <script>
        var oBox=document.getElementById('box');
        var cssJson=oBox.currentStyle||getComputedStyle(oBox);//兼容
        alert(cssJson.width);//width    200px
        alert(oBox.clientWidth);//width+padding    210px      
        //document.documentElement.clientWidth  可视窗口，宽口拉伸；
        alert(oBox.offsetWidth);//width+padding+border   212px
    </script>
</body>

 扩展：

          scrollWidth:内容的实际宽，即使超出隐藏，也不影响。

          window.screen.width/heigh:实际电脑的分辨率

          window.screen.availWidth/availHeight:去除任务栏后的电脑分辨率

          document.documentElement.scrollTop/scrollLeft || document.body.scrollTop:滚动高度

          oBox.offsetLeft:获取盒子初始left

          pageX:文档中鼠标的宽度，不兼容IE876，处理方法：clientX+scrollLeft

jQuery

var a = 元素本身的宽度；

width() = a；

innerWidth() = a+padding;

outerWidth() = a+padding+border;

outerWidth(true) = a+padding+border+margin;

posted @ 2017-12-02 11:18  blackatall  阅读(227)  评论(0)  编辑  收藏  举报