offsetwidth | 易学教程

【CSS】width 、clientWidth、scrollWidth、offsetWidth

阅读更多关于【CSS】width 、clientWidth、scrollWidth、offsetWidth

先说宽度 clientWidth、scrollWidth、offsetWidth参见 http://www.w3school.com.cn/jsref/dom_obj_all.asp clientWidth ：可见宽度，包括元素的内容区，就是最里面那部分，包括padding，不包括magin，不包括border，不包括滑动条；备注：background-color包括元素的内容区、padding、border，也就是比clientWidth涉及区域多了一个border。 scrollWidth ：可以滚动的clientWidth； offsetWidth ：不包括magin，其他都包括；注：这里offsetWidth包括滚动条的宽度，但是和scrollWidth不太一样，scrollWidth的是实际内容的宽度，就是将滑块滑动走过的宽度；而offsetWidth包括滚动条的宽度，不是滚动区域。 width ：就是你style给的width，不过有一个奇怪的地方，当打印style.width的时候，只对内联样式，且必须写成style = "width:某某px"的有用，能打印出来，其他的打印出来的都是空字符串。不知为何，好奇怪。至于高度，和宽度一样的啦，对号入座就ok。来源： oschina 链接： https://my.oschina.net/u/1165741/blog

Get width of specific div and use as another div's height?

阅读更多关于 Get width of specific div and use as another div's height?

问题 I have two div's. #divA & #divB. #divA has a width of 100% and I want to get the px value of the div and apply it to #divB as it's height CSS. I've tried using .offsetWidth but to no avail. Can anybody help me? 回答1: use .css('width') to keep units intact (ex: 400px), use .width() to get just the numerical value (ex: 400) for use in mathematical computations. for what you're doing: var divAWidth = $('#divA').css('width'); $('#divB').css('height', divAWidth); if you're getting mathematical: var

DOM element width can be non-integer?

阅读更多关于 DOM element width can be non-integer?

问题 I have some one page whose div elements are aligned by JavaScript. The JavaScript just check a set of div elements to find the max offsetWidth , then set all div elements' width to be the max offsetWidth . It works perfect in most browsers and locales, but it fails on french-France in Firefox on Mac. In this case, the content of div wraps. <div id="divFoo"> Heure de début : </div> for above HTML, below code report "79". javascript:alert(document.getElementById('divFoo').offsetWidth); but

CSSOM View Module 中的尺寸与位置属性

阅读更多关于 CSSOM View Module 中的尺寸与位置属性

CSSOM 指 CSS Object Model ，即 CSS对象模型。CSSOM 是 JavaScript 操纵 CSS 的一系列 API 集合，它属是 DOM 和 HTML API 的附属。其中视图模型（View Model）中定义了一系列接口，包括多个关于窗体、文档和元素的位置尺寸信息，特别容易混淆。 Window 接口 innerWidth/innerHeight 浏览器窗口可见区的高宽，包括滚动条。 outerWidth/outerHeight 浏览器窗口的外边沿宽高。 scrollX/scrollY 文档水平/垂直滚动量。 pageXOffset/pageYOffset 同上。 screenX/screenY 浏览器左上角距离屏幕左上角的距离。 Screen 接口 availWidth/availHeight 屏幕可用区域的尺寸。 width/height 屏幕整体尺寸。 Element 接口 clientWidth/clientHeight 元素本身尺寸，包括 padding，但不包括 border、margin 和 scroll。因此一个设置了 width:100px 的元素出现宽度为 15px 的覆盖式滚动条后，它的 clientWidth 为 85px。一些浏览器的滚动条是半透明的，并允许覆盖页面元素，这种情形下，clientWidth 为 100px。

DOM element width can be non-integer?

阅读更多关于 DOM element width can be non-integer?

I have some one page whose div elements are aligned by JavaScript. The JavaScript just check a set of div elements to find the max offsetWidth , then set all div elements' width to be the max offsetWidth . It works perfect in most browsers and locales, but it fails on french-France in Firefox on Mac. In this case, the content of div wraps. <div id="divFoo"> Heure de début : </div> for above HTML, below code report "79". javascript:alert(document.getElementById('divFoo').offsetWidth); but below code report "79.1333px". javascript:alert(window.getComputedStyle(document.getElementById('divFoo')