js取div的宽高咋办，css有content-box，border-box，padding-box，表现又不一样。好在有个offsetWidth，

 <style type="text/css">

    *{margin: 0;padding: 0;}

    #aa{

        margin: 20px;

        padding: 15px;

        border: 10px solid red;

        width: 50px;

        height: 50px;

        background-color: orange;

        box-sizing:border-box;

    }

</style>

</head>

<body>

    <div id="aa">a</div>

</body>

加不加box-sizing的offsetWidth分别为100和50，content-box的时候是15*2+10*2+50=100；另一个是15*2+10*2+0=50；border-box的时候width是指width+border+padding的值。所以可得

offsetWidth=borderWith+paddingWidth+width;都成立。offsetWidth不受盒子模型影响，用起来是非常好的。
在jq中，提供innerWidth()方法和outerWidth方法，计算是paddingWidth+width;但是在设置的时候不能直接设置，他就是个虚拟的值，不存在的属性。
outerWidth() 计算是borderWidth+paddingWidth+width;

jq还有个height()是只取width的。

还有就是浏览器窗口大小和页面大小，网景给我们提供了一个好用的只读属性innerWidth
，IE9也支持它，用它获取窗口的宽度，但是旧版本的IE的怪异模式下表现不一，ie又发明了一套clientXXX的属性，
用于获取元素可视区域的尺寸。
//可视区的宽度，不包括滚动条，即窗口大小

var windowWidth=document.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

如果不支持旧版本ie，或者手机框架，可以放心的用

windowWidth=window.innerWidth;

再来看文档的宽，标准浏览器搞了一套outherXXX的属性，那是获得浏览器尺寸的。ie又给我们奉上了scrollXXX和offsetXXX，但是实现的时候又有好多的意见不一致，搞得没法通用。留下兼容性问题。
//浏览器尺寸的
outerWidth和outherHeight
//offsetWidth
IE,Opera认为offsetWidth=clientWidth+滚动条+边框
NS,FF认为offsetWidth是网页内容实际宽度，可以小于clientWidth
//srollWidth
IE、Opera认为scrollWidth是网页实际内容宽度，可以小于clientWidth
NS、FF认为srcollWidth是网页内容宽度，不过最小值是clientWidth

//于是取其最大值

var pageWidth=Math.max(

     document.documentElement.scrollWidth,

     document.documentElement.offsetWidth,

     document.body.scrollWidth,

     document.body.offsetWidth
)

下面再来说元素的坐标

div.offsetLeft,offsetTop,都是相对于offsetParent的位置，我们一直向上累加，就能得到元素相对于页面的坐标。

元素的offsetParents是怎么确定的呢？

如果元素被移出dom或display为none，或为HTML,BODY元素，或position的精确值为fixed时，返回null，
否则分为2种情况，position为absolute，relative的元素的offsetParent总是为其最近的已定位的祖先，没有找最近的td，th元素，再没有返回body。
position为static的元素的offsetPatent先找最近的td，th，table元素，再没有返回body。

但现实中，ff在position为fixed返回body，在ie678下，会增加一条规则，先寻找离元素最近的设置有能激活hasLayout的祖先元素。

jq也有个offsetParent，它将选择元素的所有offsetParent收集起来，包装为jq对象返回。
浏览器认为offsetParent最高取到body，可能为null，jq认为元素的offsetParent的position必须为relative或absolute，否则继续回上寻找另一个被定位的祖先，没有返回html，
jq认为position：fixed也有offsetParent，就是当前可视区。

window.pageXoffset是滚动条x距离，pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

还有div.scrollTop,div.scrollLeft...

上一张老图

javascript之复习(css属性值的计算)的更多相关文章

  1. CSS学习（7）继承、属性值的计算过程

    子元素会继承父元素的某些css属性 通常跟字体相关的属性都能被继承,具体的可以在mdn里查询是否是可继承属性 属性值的计算过程(渲染过程) 按照页面文档的树形目录结构进行依次渲染 前提条件:渲染的元素 ...

  2. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  3. JavaScript如何获取css属性

    原文:JavaScript如何获取css属性 在web开发中,很多时候我们需要用JavaScript对网页的样式进行修改,接下来,我们就来看一下我们该如何访问css属性,针对不同情况及案例来进行分析. ...

  4. CSS属性值一览

    牢记内联式>嵌入式(嵌入式中设置各种文字字体.大小.位置.颜色.外距.内距最好用选择器)>外部式(外联式)的使用 属性和属性值(点击可展开) font-family(字体) Microso ...

  5. css属性值语法解读

    //margin 形式语法: [ <length> | <percentage> | auto ]{1,4} //合法实例: margin: style /*单值语法 */ 举 ...

  6. js修改css属性值

    推荐用dom.style.setProperty('属性','属性值'); 例如: $("#id")[0].style.setProperty('margin-top','1px' ...

  7. 使用JavaScript获取样式的属性值

    1 . 在js中可以使用style属性来获取样式的属性值(只能获取内联样式的属性值) 语法格式为: HTML元素.style.样式属性; 2 .   在IE浏览器中,使用currentStyle来获取 ...

  8. calc() 计算CSS属性值

    calc()是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值.calc() ...

  9. JS使用getComputedStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...

随机推荐

  1. 通过 MySQL 存储原理来分析排序和锁(转)

    先抛出几个问题 为什么不建议使用订单号作为主键? 为什么要在需要排序的字段上加索引? for update 的记录不存在会导致锁住全表? redolog 和 binlog 有什么区别? MySQL 如 ...

  2. Azure系列2.1.15 —— SharedAccessBlobPolicy

    (小弟自学Azure,文中有不正确之处,请路过各位大神指正.) 网上azure的资料较少,尤其是API,全是英文的,中文资料更是少之又少.这次由于公司项目需要使用Azure,所以对Azure的一些学习 ...

  3. [转帖]一个FORK的面试题

    一个FORK的面试题 https://coolshell.cn 搞不懂 fork 的含义. Linux 里面的线程不是教科书上面的标准的线程 好像用 父子进程来进行 模拟线程的处理 父子线程应该共享 ...

  4. UTC时间、GMT时间、本地时间、Unix时间戳

    引用: https://blog.csdn.net/u012102306/article/details/51538574 https://blog.csdn.net/foxir/article/de ...

  5. Oracle可视化工具PL/SQL Developer的安装与配置

    安装程序: 安装目录不能有中文和空格,否则无法进行远程连接. 推荐使用 D:\PLSQLDeveloper 为安装目录 破解PLSQLDeveloper 使用工具 PLSQL Developer10. ...

  6. MyBatis映射文件4(参数获取#{}和${}/select标签详解[返回类型为list])

    参数获取 之前我们都是采用#{}的方式进行参数传递,其实MyBatis还有另外的参数传递方式${} 使用方法相同,但是还是有很大区别的 这里做一个测试: <select id="get ...

  7. clone内容包含select2

    如果克隆的内容包含select2,克隆之后要先删除select之后自动生成的span,再对select2进行初始化,生成新的元素.

  8. Spring中使用Ehcache的方法和注意事项

    如何调用方法数据增加缓存 @Cacheable(value="MY_CACHE", key="'cache_business_' + #business_id" ...

  9. Django进阶知识

    drf学习之Django进阶点 一.Django migrations原理 1.makemigrattions: 相当于在每个app下的migrations文件夹下生成一个py脚本文件用于创建表或则修 ...

  10. How to create ISO on macOS

    hdiutil makehybrid -iso -joliet -o test1.iso /users/test/test1