前端碎语(6)

光标效果不见了?

在页面里,屏幕上光标的款式我们能够用css的’cursor’属性举行定义。平常来说,只需光标hover到指定的元素上面其款式就会按我们指定的举行显现,然则假如我们指定的元素被其他元素“遮住了”呢?来看看下面这个demo:

demo

能够看到,虽然我们给div1自定义了光标款式,但在被div2挡住的那部份,我们预设的效果就没有了,或者说这个效果是不能“穿透”div2的。这也就提醒我们,当我们的一些交互须要我们自定义光标款式的时刻(比方拖动),肯定要注意元素间的堆叠递次,不然很有可能会涌现你移动到某个位置上时你的光标效果倏忽消逝的征象。

至于css自身是怎样决议元素间堆叠递次的,这照样个比较庞杂的题目,详细地能够看看张鑫旭这篇文章

js里几个猎取元素宽高属性的比较

offsetWidthclientWidthscrollWidthoffsetHeightclientHeightscrollHeight这几个属性的特性一向傻傻分不清,此次就好好把他们弄清楚吧。先看demo:

demo

先剖析一下div1和待转动条的div2两个一般元素的状况,在差别浏览器下(不斟酌IE8-)运转上面这个demo后,在控制台能够看到各浏览器的效果都是一样的:

《前端碎语(6)》

能够得出结论:

  • offsetWidthoffsetHeight属性:数值对应的是元素的可视宽高,含元素自身宽高、padding、(有转动条时)转动条、border。

  • clientHeightclientWidth属性:数值对应的是元素的内容加padding所占有的视觉面积,有转动条时还要加上转动条,不含border。

  • scrollHeightscrollWidth属性:由div1的效果可见,没有转动条时实行效果和clientHeightclientWidth一样。有转动条的状况则庞杂一点,上面这个例子中div2的内容足够大、能发生转动,故此时效果为content的大小;而假如把content这个div调小、直到不能发生转动时效果应该是和clientHeightclientWidth一样的。

上面的结论只是针对页面一般元素,假如运用这几个属性的是全部页面(html元素,这里用document.documentElement接见),那输出的状况就庞杂了,没有显著的规律,找的差别的材料说法也不太雷同、并不能诠释我测试的效果。所以这里只讲一些我测试以后比较牢固的效果,仅供参考:

  • 起首clientHeightclientWidth的行动一般元素的不太一样,在所有浏览器里基础指的都是页面视口的大小。

  • scrollHeightscrollWidth仍要分有无转动,有转动时指的是全部页面内容的大小;没转动时在chrome下指视口的大小、IE和FF下则是和offsetWidthoffsetHeight一样。

  • offsetWidthoffsetHeight属性在chrome、FF、IE11下都和本来一样指全部元素的可视宽高。

    原文作者:Levon
    原文地址: https://segmentfault.com/a/1190000004541353
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞