Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]上网搜了一下scrollWidth和scrollHeight,大部分都是转帖,也没有具体说清楚,这两个属性值是什么,也没有图。索性自己测试一下,包含的浏览器有IE6,IE7,IE8,IE9,Firefox,Chrome,Opera,Safari,顺便把测试的截图也发上来,这样大家看着也明白。一、scrollWidth首先,我们先上MSDN上查一下scroll

大家好,又见面了,我是你们的朋友全栈君。 

上网搜了一下scrollWidth和scrollHeight,大部分都是转帖,也没有具体说清楚,这两个属性值是什么,也没有图。

索性自己测试一下,包含的浏览器有IE 6,IE 7,IE 8,IE 9,Firefox,Chrome,Opera,Safari,顺便把测试的截图也发上来,这样大家看着也明白。

一、scrollWidth

首先,我们先上MSDN上查一下scrollWidth的文档说明。

链接地址:http://msdn.microsoft.com/en-us/library/ms534619%28v=VS.85%29.aspx

scrollWidth Property

.NET Framework 3.0

Retrieves the scrolling width of the object.

返回对象的滚动宽度。(这句就是废话,和没解释一样)

Syntax

HTML N/A
Scripting [ iWidth = ] object.scrollWidth

Possible Values

iWidth Pointer to a nonnegative long integer that specifies the width, in pixels.

The property is read-only.The property has no default value.

这个属性是只读的,并且没有默认值。

Remarks

The width is the distance between the left and right edges of the object’s visible content.

这个宽度是指对象的可见内容的左边界到右边界的距离。(这个左边界和右边界是如何理解,也没有说清楚,不过下面给了个链接,我懒的去看。)

For more information about how to access the dimension and location of objects on the page through the Document Object Model (DOM), seeMeasuring Element Dimension and Location with CSSOM in Internet Explorer 9.

下面再来看看火狐的开发者网站MDN是如何解释的。

链接地址:https://developer.mozilla.org/en/DOM/element.scrollWidth

scrollWidth is a read–only property that returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the scrollWidth is larger than theclientWidth.

scrollWidth是只读属性,返回的是元素的内容宽度或者元素本身的宽度,两者之间的大者。如果元素比内容区域宽(例如,如果有滚动条用来滚动内容),scrollWidth是大于clientWidth的。

综上所述,结合IE和Firefox的官方文档的解释,我认为scrollWidth的语义就是当一个元素有滚动条的时候,scrollWidth表示的是元素内容区域的滚动宽度,当没有滚动条的时候,就是元素的本身宽度。

下面我们就来看看各个浏览器,实际是怎么解释的。

测试的html代码很简单:

(1)没有滚动条,没有内容

  1. <!DOCTYPE HTML>  
  2. <html lang=“en-US”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6.     <script type=“text/javascript”>  
  7.     window.onload = function() {  
  8.         var div = document.getElementById(‘noScrollbar’);  
  9.         alert(div.scrollWidth);  
  10.     };  
  11.     </script>  
  12. </head>  
  13. <body>  
  14.     <div id=“noScrollbar” style=“width: 100px; height: 100px; background-color: green; margin: 100px; padding: 10px;”></div>  
  15. </body>  
  16. </html>  

(2)没有滚动条,有内容

  1. <!DOCTYPE HTML>  
  2. <html lang=“en-US”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6.     <script type=“text/javascript”>  
  7.     window.onload = function() {  
  8.         var div = document.getElementById(‘noScrollbarWithContent’);  
  9.         alert(div.scrollWidth);  
  10.     };  
  11.     </script>  
  12. </head>  
  13. <body>  
  14.     <div id=“noScrollbarWithContent” style=“width: 100px; height: 100px; background-color: green; margin: 100px; padding: 10px;”>  
  15.         <div style=“width: 100px; height: 100px; background-color: yellow;”></div>  
  16.     </div>  
  17. </body>  
  18. </html>  

(3)有滚动条,有内容

  1. <!DOCTYPE HTML>  
  2. <html lang=“en-US”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6.     <script type=“text/javascript”>  
  7.     window.onload = function() {  
  8.         var div = document.getElementById(‘scrollbarWithContent’);  
  9.         alert(div.scrollWidth);  
  10.     };  
  11.     </script>  
  12. </head>  
  13. <body>  
  14.     <div id=“scrollbarWithContent” style=“width: 100px; height: 100px; background-color: green; margin: 100px; padding: 10px; overflow: auto;”>  
  15.         <div style=“width: 200px; height: 83px; background-color: yellow;”></div>  
  16.     </div>  
  17. </body>  
  18. </html>  


1、IE 6

做中文网站IE 6还是要考虑的,因为IE 6在中国还是有很大份额的。

(1)没有滚动条,没有内容。如下图,scrollWidth = 左内边距 + 右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

(2)没有滚动条,有内容。如下图,scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

(3)有滚动条,有内容。如下图,scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

综上,IE 6的scrollWidth = 左内边距 + 内容宽度 + 右内边距,这个内容宽度不等于元素的宽度

2、IE 7

(1)没有滚动条,没有内容。如下图,scrollWidth = 左内边距 + 右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

(2)有滚动条,有内容。如下图,scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

(3)有滚动条,有内容。如下图,scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

综上,IE 7的scrollWidth = 左内边距 + 内容宽度 + 右内边距,这个内容宽度不等于元素的宽度

3、IE 8

(1)没有滚动条,没有内容。如下图,scrollWidth = 左内边距 + 内容宽度 + 右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

(2)有滚动条,有内容。如下图,scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

(3)有滚动条,有内容。如下图,scrollWidth = 左内边距 + 内容宽度

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

综上,IE 8的scrollWidth = 左内边距 + 内容宽度

IE 6和IE 7的表现是一致的,IE 8的修正了IE 6和IE 7在解释内容宽度的不正确,但是IE 8的scrollWidth为什么没有了padding-right?真是奇怪!

再来看看firefox是如何表现的。

4、Firefox

(1)没有滚动条,没有内容。如下图,scrollWidth = 左内边距 + 内容宽度 + 右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

(2)有滚动条,有内容。如下图,scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

(3)有滚动条,有内容。如下图,scrollWidth = 左内边距 + 内容宽度

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

综上,Firefox的scrollWidth = 左内边距 + 内容宽度

最后,结果是ie8、ie9、firefox、chrome、opera、safari的表现都是一致的,具体我就不截图了。IE 6和IE 7表现一致,但是他们的内容宽度有bug。

我们来看看w3是如何解释的,链接地址:http://www.w3.org/TR/cssom-view/#dom-element-scrollwidth

The scrollWidth attribute must return the result of running these steps:

  1. If the element does not have any associated CSS layout box return zero and terminate these steps.

  2. If the element is the root element and the Document is not inquirks mode return max(document content width, value ofinnerWidth).

  3. If the element is the HTML body element and the Document is inquirks mode return max(document content width, value ofinnerWidth).

  4. Return the computed value of the ‘padding-left‘ property, plus the computed value of the ‘padding-right‘, plus thecontent width of the element.

W3C的解释是scrollWidth应该是计算过的左右padding值加上内容宽度,从上面的测试来看,我觉得所有浏览器都表现的不正确,IE 6和IE 7没有正确计算内容宽度。IE 8及firefox等其他浏览器都没有加上padding-right。

最后,我向bugzilla提交了一个firefox的bug。受理的很快,中午提交,下午就有人回复。

地址在这里:https://bugzilla.mozilla.org/show_bug.cgi?id=718548

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163756.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • centos7.6安装docker_docker自动部署多环境

    centos7.6安装docker_docker自动部署多环境前言前面一篇学了mac安装docker,这篇来学习在linux上安装docker环境准备Docker支持以下的CentOS版本,目前,CentOS仅发行版本中的内核支持Docker。Doc

  • java中的static关键字的作用?

    java中的static关键字的作用?是静态修饰符,什么叫静态修饰符呢?大家都知道,在程序中任何变量或者代码都是在编译时由系统自动分配内存来存储的,而所谓静态就是指在编译后所分配的内存会一直存在,直到程序退出内存才会释放这个空间,也就是只要程序在运行,那么这块内存就会一直存在。这样做有什么意义呢?在Java程序里面,所有的东西都是对象,而对象的抽象就是类,对于一个类而言,如果要使用他的成员,那么普通情况下必须先实例化对象后,通过对象

  • 最好懂的python文件读写(详解)

    最好懂的python文件读写(详解)目录  1、文件读写的流程  2、文件读写的几种常见模式  3、read、readline、readlines的区别  4、对于一个10G的大文件,怎么高效的查看文件中的内容呢?1、文件读写的流程1)类比windows中手动操作txt文档,说明python中如何操作txt文件?①windows中手动操作txt文件的步骤找到word文档打开word文档查看(或操作)word文…

  • linux 批处理教程,最全的批处理入门教程,菜鸟必看[通俗易懂]

    linux 批处理教程,最全的批处理入门教程,菜鸟必看[通俗易懂]1.这是一篇技术教程,我会用很简单的文字表达清楚自己的意思,你要你识字就能看懂,就能学到知识。写这篇教程的目的,是让每一个看过这些文字的朋友记住一句话:如果爱可以让事情变的更简单,那么就让它简单吧!看这篇教程的方法,就是慢!慢慢的,如同品一个女人、一杯茗茶,你会发现很多以前就在眼前的东西突然变的很遥远,而有些很遥远的东西却又突然回到了眼前。2.先概述一下批处理是个什么东东。批处理的定义,至今我也没…

  • 网络编程TCP三次握手

    网络编程TCP三次握手

  • TortoiseGit Couldn’t load this key(unable to open file)

    很小的问题,记录一下!在使用TortoiseGit 配置了ppk后,有一个Git仓库每次更新的时候都会提示下面的错误! Couldn’t load this key(unable to open file)如图:解决办法: 在对应的仓库下面右键 ,看到如下 , TortoiseGit_Gen_GitHub.ppk是我之前生成的,后来这个ppk删掉了,而…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号