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. UIViewController控制器的生命周期

    视图控制器就是用来管理iOS程序中的视图,默认一个UIViewController为我们提供了一个视图UIView  我们称为根视图 - (instancetype)init{ if (self = ...

  2. RTMP流媒体播放过程(转)

    http://blog.csdn.net/leixiaohua1020/article/details/11704355 本文描述了从打开一个RTMP流媒体到视音频数据开始播放的全过程. 注意:RTM ...

  3. 2015.4.16-SQL-内连接与外连接

    1.内连接 如图: 关键字 inner join 2.外连接 分为左外连接 和右外连接,即如果是左外连接,即使左面没有值,也会显示为null, 右外连接也如此 关键字 left join ; righ ...

  4. 判断浏览器IE6

    <!--[if lte IE 6]><LINK rel="stylesheet" type="text/css" href="ima ...

  5. 关于淘宝的数据来源,针对做淘宝客网站的淘宝api调用方法

    上次写了个淘宝返利模式的博客,直接被移除首页,不知道何故啊.可能是真的跟技术不太刮边. 众所周知,能够支撑一个网站运营的最基础不是程序写的多么好.也不是有多么牛X的运营人员,最主要的是数据,如果没有数 ...

  6. fzu 1753 Another Easy Problem

    本题题意为求 t (t<150) 个 c (n,m)  (1<=m<=n<=100000)的最大公因子: 本题的难点为优化.主要有两个优化重点.一是每次对单个素因子进行处理,优 ...

  7. ADO.NET帮助类DBHelper

    一. DBHelper帮助类 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  8. SQL Server 内存使用量下降问题

    SQL server这个程序是非喜欢内存这东西的.所以它的内存使用量下降,一定是被别人给抢去了.这件事的后果就是SQL Server 变的 非常慢.怎么样才可以让这件事不太容易发生呢? ------- ...

  9. ASP.NET Request.QueryString 出现乱码问题

    前台: var txing = $("#txing").combobox("getValues"); .......... &tixing=" ...

  10. 竹林蹊径-深入浅出Windows内核开发作者的博客

    http://blog.csdn.net/blog_index http://blog.csdn.net/blog_index/article/details/6012054 http://downl ...