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; position:relative;}
#div3 { background:orange;}
</style>
<script type="text/javascript">

    window.onload = function() {

        var oDiv1 = document.getElementById(‘div1‘);
        /*
            style.width:样式宽（带单位）
            clientWidth: 可视区宽（样式宽+padding 不带单位）
            offsetWidth:占位宽（样式宽+padding+border 不带单位）
        */

        alert(oDiv1.style.width + ‘  ‘ + oDiv1.clientWidth + ‘  ‘ + oDiv1.offsetWidth);
    }

</script>
</head>

<body id="body">
    <div id="div1" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid red;"></div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
div{ padding:40px 50px;}
#div1 { background:red;}
#div2 { background:blue; position:relative;}
#div3 { background:orange;}
</style>
<script type="text/javascript">
    
    window.onload = function() {
        
        var oDiv1 = document.getElementById(‘div1‘);
        /*
            style.width:样式宽（带单位）
            clientWidth: 可视区宽（样式宽+padding 不带单位）
            offsetWidth:占位宽（样式宽+padding+border 不带单位）
        */
        
        alert(oDiv1.style.width + ‘  ‘ + oDiv1.clientWidth + ‘  ‘ + oDiv1.offsetWidth);
    }
    
</script>
</head>

<body id="body">
    <div id="div1" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid red;"></div>
</body>
</html>

时间： 2024-11-03 14:50:24

javascript 获取元素宽高的相关文章

javascript DOM元素宽高

获取元素位置 offsetLeft 元素相对于父元素的左边距离 offsetHeight 元素相对于父元素上部的距离 offsetLeft和style.left的区别 offsetLeft是只读的:style.left是可读写的,要改变元素的位置,只能使用style.left offset返回的是一个Number:style.left返回的是字符串,如“30px” style.left需要在HTML中直接定义.在CSS样式表中定义,是无法获取这个属性的 这里引出一点: 如果要获取元素属性的话,这

各种情况上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即可. 如果没有

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

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

js获取元素宽高

只说ie8+的浏览器的方法. 在转vue之前,一直使用jquery来获取元素的高度,最近转vue,发现了一个问题.使用vue的时候,部分操作需要在mounted这个生命周期里面去做,官网对mounted的解释是: 如果不在vm.$nextTick里面做操作的时候,是很有可能获取不到组件内部元素的宽高的.刚开始的时候,我没有仔细看官网,所以在mounted里面是直接获取不到子孙元素的宽高的. 后来,看了iview的一个组件的源码,看到了getComputedStyle方法获取宽高,对getComp

微信小程序之动态获取元素宽高

我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用呢? 首先,这个接口会返回一个对象实例. var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容. 返回的 obj 有五个方法: 1.  obj.in(component):没用过这个方法,多用于组件的选择器. 2.   obj.select

javascript获取网页宽高，屏幕宽高，屏幕分辨率等

? <script> var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s += "\r\n网页可见区域高:"+ document.body.clientHeight; s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)"; s += "\r\

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

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

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

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

javascript 常用获取页面宽高信息 API

在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间, 花点时间整理了一下,获取页面宽高信息的API 持续整理中... 在IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域