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>
javascript 获取元素宽高的更多相关文章
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- JS获取元素宽高的两种情况
JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用 document.getElementById('xxx'). ...
- 微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
- 滚动加载图片（懒加载）实现原理（这是旧实现，仅做为获取元素宽高api的参考）
https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...
- js获取元素宽高、位置相关知识汇总
常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...
- javascript获取网页宽高，屏幕宽高，屏幕分辨率等
<script> var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s + ...
- Vue中获取元素宽高
<div ref="init"></div> 写在 页面 方法 部分 这里的 offsetHeight 是返回元素的宽度(包括元素宽度.内边距和边框,不包括 ...
- js 获取元素宽高
可以用源生js的.offsetHeight .offsetWidth属性 document.getElementById("temp_form").offsetHeight // ...
- uni-app获取元素宽高封装
getElSize(id) { //得到元素的size return new Promise((res, rej) => { uni.createSelectorQuery().select(' ...
随机推荐
- oracle 集合定义
集合:是具有相同定义的元素的聚合.Oracle有两种类型的集合: 可变长数组(VARRAY):可以有任意数量的元素,但必须预先定义限制值. 嵌套表:视为表中之表,可以有任意数量的元素,不需要预先定义限 ...
- Turn the corner--hdu2438(3分法)
Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
- ADO.NET帮助类DBHelper
一. DBHelper帮助类 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
- Linux下静态编译Qt程序
一般情况下,我们用Qt编译出来的程序是要依赖于系统Qt库的,也就是这个程序移到别的没有安装Qt库的系统上是不能使用的.会提示缺少……库文件之类的错误.这就是动态编译的结果. 但是如果我们想编译一个程序 ...
- aliyun.com
https://help.aliyun.com/knowledge_detail/39495.html?spm=5176.7839494.2.1.AhdvPM
- 10453 Make Palindrome （dp)
Problem A Make Palindrome Input: standard input Output: standard output Time Limit: 8 seconds By def ...
- Android NDK 下载
Android NDK Android NDK, Revision 10 (July 2014) Platform(32-bit target) Package Size (Bytes) MD5 Ch ...
- OSCHina技术导向：Java轻量web开发框架——JFinal
JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful.在拥有Java语言所有优势的同时再拥有ru ...
- [置顶] Direct UI
有个坑爹的说法:其实Direct UI只是一个思想,要实现这个思想,还要靠自己. 采用windowless方式用api或gdi实现ui的绘制. DirectUI意为直接在父窗口上绘图(Paint on ...
- 实际用户ID，有效用户ID和设置用户ID
摘自http://blog.csdn.net/guosha/article/details/2679334 实际用户ID,有效用户ID和设置用户ID 看UNIX相关的书时经常能遇到这几个概念,但一直没 ...