前端碎语（6）

光标效果不见了？

在页面里，屏幕上光标的样式我们可以用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下都和原来一样指整个元素的可视宽高。