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>

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

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

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  2. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

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

    我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...

  4. 滚动加载图片（懒加载）实现原理（这是旧实现，仅做为获取元素宽高api的参考）

    https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...

  5. js获取元素宽高、位置相关知识汇总

    常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...

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

    ​ <script> var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s + ...

  7. Vue中获取元素宽高

    <div ref="init"></div> 写在 页面 方法 部分 这里的 offsetHeight 是返回元素的宽度(包括元素宽度.内边距和边框,不包括 ...

  8. js 获取元素宽高

    可以用源生js的.offsetHeight .offsetWidth属性 document.getElementById("temp_form").offsetHeight // ...

  9. uni-app获取元素宽高封装

    getElSize(id) { //得到元素的size return new Promise((res, rej) => { uni.createSelectorQuery().select(' ...

随机推荐

  1. 重写TextView，实现圆形背景，文本居中显示

    最近,在做考试试题排版,产品提出题号希望显示成圆形背景,序号文本居中显示. (有点问题:文本没有绝对居中,暂时没做处理.) 为此,我采取的方式是重写TextView的onDraw方法,绘制一个圆形背景 ...

  2. iOS数组、字典与json字符串的转换

    /*! * 将字典或者数组转化为JSON串 * * @param theData <#theData description#> * * @return <#return value ...

  3. 原生的UITableViewCell高度自适应，textLabel自动换行显示

    /* * 设置子项cell **/ - (UITableViewCell *)getChildCell:(UITableView *)tableView and:(NSIndexPath *)inde ...

  4. MVC中的错误过滤器无法拦截URL路径错误的解决办法

    “/”应用程序中的服务器错误. 无法找到资源. 说明: HTTP 404.您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用.请检查以下 URL 并确保其拼写正确. 请求 ...

  5. asp.net后台向前端输出js脚本的三种方法

    //这个方法最快,因为它会输出到html标签之前 Response.Write("<script type='text/javascript'>alert('这个最快')< ...

  6. Android studio Debug效率提升

    Android studio Debug效率提升,可以在控制台打印log的同时而不暂停程序的运行,尤其是当遇到复杂交互的时候,比如滑动,拖动,这时候程序暂停执行是特别恶心的.其实你可以更新打印信息而不 ...

  7. css3弹性盒模型（Flexbox）

    Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当 ...

  8. vmware设置centos虚拟机nat联网（转）

    今天在vmware虚拟主机中安装hearbeat,为了使用最新的版本,选用编译安装了.在编译过程中,需要连接被墙的网站下载文件,那只能用vpn,但我使用的是桥接方式联网,使用不了真实主机的vpn,于是 ...

  9. first blood暴力搜索，剪枝是关键

    First Blood 题目描述 盖伦是个小学一年级的学生,在一次数学课的时候,老师给他们出了一个难题: 老师给了一个正整数 n,需要在不大于n的范围内选择三个正整数(可以是相同的),使它们三个的最小 ...

  10. Nginx 配置指令的执行顺序（一）

    大多数 Nginx 新手都会频繁遇到这样一个困惑,那就是当同一个 location 配置块使用了多个 Nginx 模块的配置指令时,这些指令的执行顺序很可能会跟它们的书写顺序大相径庭.于是许多人选择了 ...