zoukankan      html  css  js  c++  java
  • 宽度总结-scrollWidth,clientWidth,offectWidth

      平时写js的时候,有时候会遇到这样的情况,需要去计算元素或者屏幕的宽度,再进行不同的处理,但是宽度真的有不少,很容易搞混,特此总结下,也希望大家亲测下,这样比较有体会,记得牢固些。

      1、scrollWidth:指的是元素的内容宽度,会随着内容撑大,不包边线宽度。

      2、clientWidth:指的是元素的可视区域的宽度,不会随着内容撑大,不包边线宽度,如果不出现横向滚动条,则等于scrollWidth,如果出现,则小于scrollWidth。

      3、offectWidth:指的是元素的实际宽度,包含边线宽度,和CSS关系较大。

      由上可知:

      元素出现横向滚动条,clientWidth < offectWidth < scrollWidth

      元素不出现横向滚动条,clientWidth = scrollWidth < offectWidth

      另外提下,window.screen.width计算屏幕宽度很方便。

  • 相关阅读:
    iOS数字媒体开发浅析
    Servlet
    Qt之图形(绘制文本)
    Qt之图形(转换)
    asp.net 缓存公共类
    logback.xml
    ext树菜单实体类
    ext,exrReturn新增,修改删除等用
    ExtPager ,分页
    ExtGridReturn ,存放ext的实体类集合和总数
  • 原文地址:https://www.cnblogs.com/pijiaxiang/p/6689146.html
Copyright © 2011-2022 走看看