DOM元素尺寸与位置

// clientWidth, clientHeight
   1. 增加边框、外边距，DOM实际大小不受影响
   2. 增加滚动条，会减少DOM实际大小，原因不把滚动条的大小算在内
   3. 增加内间距，会影响DOM实际大小
   4. 在没有内边距和滚动条的情况下，没有设置CSS大小，那么IE浏览器会理解为0

// scrollWidth, scrollHeight
   1. 增加边框，浏览器之间有兼容问题
   2. 增加外间距，DOM实际大小不受影响
   3. 增加滚动条，会减少DOM实际大小，原因不把滚动条的大小算在内
   4. 增加内间距，会影响DOM实际大小
   5. 有文本溢出时，加上滚动条方可解决兼容问题

// offsetWidth, offsetHeight
   1. 增加边框、内间距，会影响DOM实际大小
   2. 增加外间距、滚动条，DOM实际大小不受影响

时间： 2024-08-26 01:08:01

DOM元素尺寸与位置的相关文章

DOM元素尺寸和位置

一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; //200px.空 box.style.height; //200px.空 style 获取只能获取到行内style 属性的CSS 样式中的宽和高,如果有获取:如果没有则返回空. 2.通过计算获取元素的大小 var style = window.getComputedStyle ? window.ge

DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

[1] slientWidth 和 sclientHeight slientWidth:获取的是可视宽度 slientHeight:获取的是可视高度 <html> <head> <style> .div1{ width:50px; height:50px; overflow:scroll; //设置滚动条 } </style> </head> <body> <div id="div" class="

JS-学习－DOM元素尺寸和位置

一,获取元素的css大小 1.通过style内联获取元素的大小 var box = document.getElementById('box'); // 获得元素; box.style.width; // 200px; box.style.height; 2.通过计算获取元素的大小 var style = window.getComputedStyle ? window.getComputedStyle(box,nul

深入学习jQuery元素尺寸和位置操作

× 目录 [1]尺寸设置 [2]位置设置前面的话对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect()方法.而jQuery有着对应的更为简便的方法.本文将详细介绍jQuery中的元素尺寸和位置操作尺寸设置在CSS中,宽高有三种表示,分别是content-box.padding-box和border-box里的三种宽高.可以分别对应于jQuery中height()/width().innerHe

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如本文左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度一文. 概述这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途文档标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

js 表格、表单、元素尺寸和位置

复习 DOM : document object model DOM节点关系属性 childNodes 元素\注释\文本 children 元素 firstChild 第一个子节点 firstElementchild 第一个元素子节点 lastChild lastElementChild parentNode offsetParent previousSibling previousElementSibling nextSibling nextElementSibling 节点增删改,复制 do

使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小

使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素然后:section[0]: 获得html的dom元素然后: 使用section[0].getBoundingClientRect来获取该元素的时时位置和大小

窗口属性和DOM 元素尺寸位置及习题加强

可视窗口大小:window.innerWidth:/innerHeight 窗口滚动条距离window.pageXOffset:pageYoggset dom(元素).offsetWidth//求可视元素的宽高:dom.offsetHeigth//dom.offsetLeft//返回相对于第一个有定位的父级的距离dom.offsetTop// window.scroll()/scrollTo() //跳动到传入数值的地方:scrollBy() //在之前的基础做累加: 小说阅读器 <div

[原]js获取dom元素的实际位置及相对坐标

关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect 用法: var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left); 获取相对位置: var bodyRect