javascript DOM元素宽高

获取元素位置

  • offsetLeft　　元素相对于父元素的左边距离
  • offsetHeight　　元素相对于父元素上部的距离

offsetLeft和style.left的区别

  • offsetLeft是只读的；style.left是可读写的，要改变元素的位置，只能使用style.left
  • offset返回的是一个Number；style.left返回的是字符串，如“30px”
  • style.left需要在HTML中直接定义。在CSS样式表中定义，是无法获取这个属性的

这里引出一点：

如果要获取元素属性的话，这个属性必须在元素中声明。写在CSS样式表和<style>中都是无法被脚本获取的。

而且，element.width和element.style.width是两个属性。虽然显示出来效果相同，但是element.width是Number，element.style.width是String

获取元素宽高

  • element.offsetWidth
  • element.offsetHeight

offset属性获取到元素的宽高包括padding，不包括margin

element.style.width只能修改属性的值，不能用来获取值

获取浏览器窗口宽高

  • window.innerWidth
  • window.innerHeight
  • window.outerWidth
  • window.outerHeight

滚动属性

  • scrollTop
  • scrollLeft

返回元素完整的宽高。

  • scrollWidth
  • scrollHeight
时间： 2024-10-29 03:48:51

javascript DOM元素宽高的相关文章

javascript 获取元素宽高

style.width,clientWidth,offsetWidth <!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> div{ padding:40px 50px;} #div1 { background:red;} #div2 { background:blue; positio

原生JS获取元素宽高实践详解

开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处 秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css

jQuery中几个关于元素宽高方法的区别

几个关于元素宽高的方法 height():带参数设置,不带参数获取,参数是number类型 width():带参数设置,不带参数获取,参数是number类型 innerHeight() :内边距+内容的高度 innerWidth() :内边距+内容的宽度 outerHeight:上下内边距+内容+上下边框 outerWidth :左右内边距+内容+左右边框 案例测试: <!DOCTYPE html> <html lang="en"> <head> &

窗口尺寸，文档高，元素宽高的获取方式

一.元素宽高: window.onload = function() {    var oDiv = document.getElementById('div1');     /*        width height        style.width : 样式宽        clientWidth : 可视区宽        offsetWidth    : 占位宽    */        alert( oDiv.style.width );    //100    alert( o

页面宽高，窗口宽高，元素宽高，元素位置，页面滚动距离

页面宽高: document.body.clientWidth/Height(不包括margin) document.body.offsetWidth/Height(不包括margin) document.body.scrollWidth/Height(包括margin) tips: 1.如果不是最大化浏览器窗口,且在body标签设置min-width,document.body.offsetWidth会比document.body.clientWidth多出2px,那就是滚动条旁边的2px空白

CSS子元素居中(父元素宽高已知，子元素未知)

<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; width:50px; height:50px; //宽高可以不写 } </style> <div class="container"> <div class=&quo

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

各种情况上JS获取元素宽高

各种情况下JS获取元素宽高 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:996px">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);</script>默认分类 如上,使用el.style.width即可. 如果没有

兼容性— IE6下子元素宽高会撑大父级

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; border:10px solid black; } .content{ width: 400px; height: 400p