摘要：和属性数值对应的是元素的内容加所占据的视觉面积，有滚动条时还要加上滚动条，不含。和仍要分有没有滚动，有滚动时指的是整个页面内容的大小没滚动时在下指视口的大小和下则是和一样。与属性在下都和原来一样指整个元素的可视宽高。
光标效果不见了？
在页面里，屏幕上光标的样式我们可以用css的"cursor"属性进行定义。一般来讲，只要光标hover到指定的元素上面其样式就会按我们指定的进行显示，但是如果我们指定的元素被其他元素“遮住了”呢？来看看下面这个demo：
demo
可以看到，虽然我们给div1自定义了光标样式，但在被div2盖住的那部分，我们预设的效果就没有了，或者说这个效果是不能“穿透”div2的。这也就提示我们，当我们的一些交互需要我们自定义光标样式的时候（比如拖动），一定要注意元素间的堆叠顺序，否则很有可能会出现你移动到某个位置上时你的光标效果突然消失的现象。
至于css本身是如何决定元素间堆叠顺序的，这还是个比较复杂的问题，具体地可以看看张鑫旭这篇文章。
js里几个获取元素宽高属性的比较offsetWidth、clientWidth、scrollWidth、offsetHeight、clientHeight、scrollHeight这几个属性的特点一直傻傻分不清，这次就好好把他们弄清楚吧。先看demo：
demo
先分析一下div1和待滚动条的div2两个普通元素的情况，在不同浏览器下（不考虑IE8-）运行上面这个demo后，在控制台可以看到各浏览器的结果都是一样的：
可以得出结论：
offsetWidth和offsetHeight属性：数值对应的是元素的可视宽高，含元素本身宽高、padding、（有滚动条时）滚动条、border。
clientHeight和clientWidth属性：数值对应的是元素的内容加padding所占据的视觉面积，有滚动条时还要加上滚动条，不含border。
scrollHeight和scrollWidth属性：由div1的结果可见，没有滚动条时执行结果和clientHeight、clientWidth一样。有滚动条的情况则复杂一点，上面这个例子中div2的内容足够大、能产生滚动，故此时结果为content的大小；而如果把content这个div调小、直到不能产生滚动时结果应该是和clientHeight、clientWidth一样的。
上面的结论只是针对页面普通元素，如果使用这几个属性的是整个页面（html元素，这里用document.documentElement访问），那输出的情况就复杂了，没有明显的规律，找的不同的资料说法也不太相同、并不能解释我测试的结果。所以这里只讲一些我测试之后比较固定的结果，仅供参考：
首先clientHeight和clientWidth的行为普通元素的不太一样，在所有浏览器里基本指的都是页面视口的大小。
scrollHeight和scrollWidth仍要分有没有滚动，有滚动时指的是整个页面内容的大小；没滚动时在chrome下指视口的大小、IE和FF下则是和offsetWidth、offsetHeight一样。
offsetWidth与offsetHeight属性在chrome、FF、IE11下都和原来一样指整个元素的可视宽高。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78816.html
摘要：和并不是一个标准的属性，才是，所以火狐长久以来都不支持，同时也不支持。 这个系列保持开坑不埋的状态已经过去三个月了，而在这几个月中我才算第一次认真地深入理解js。虽然期间笔记是记了不少，但写博文又不应是简单的复制粘贴，还是得保证有讨论价值、有干货的。而我面对的现实是：一来基础差导致识别和捞出有讨论价值的干货得自身功夫练到一定阶段，二来又因为记的杂乱且缺乏日常整理，整理一下就是拖一下，再...
阅读 2445·2021-09-09 09:33
阅读 2819·2019-08-30 15:56
阅读 3100·2019-08-30 14:21
阅读 869·2019-08-30 13:01
阅读 830·2019-08-26 18:27
阅读 3565·2019-08-26 13:47
阅读 3439·2019-08-26 10:26
阅读 1566·2019-08-23 18:38
