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(' ...
随机推荐
- CAA调试
在需要调试的Module(*.m)上右键,选择属性,命令位置选择你的framework目录 路径选择对应工程目录下的\intel_a(或者Win64 -- 64位机器) 然后就可以尽 ...
- setlocal enabledelayedexpansion
http://www.jb51.net/article/29323.htm 例1: 代码如下: @echo off set a=4 set a=5&echo %a% pause 结果:4 解 ...
- Centos7安装JDK
以下是gz包方式: 1,将jdk-8u51-linux-x64.tar.gz放到/usr/java目录下 2,用tar -zxvf jdk-8u51-linux-x64.tar.gz 解压到当前目录 ...
- arrayAccess的接口使用
<?php //get the methods instance of ArrayAccess //get the properties instance of ArrayAccess $ref ...
- 看懂这个sql 你的sql语句就掌握了
某财务报表 USE [PB_AHTC]GO/****** Object: StoredProcedure [dbo].[JSPRO] Script Date: 12/10/2013 11:54:52 ...
- 关于listener
View.OnKeyListener |_____onKey(View v, int keyCode, KeyEvent event) View.OnTouchListener |_____onTou ...
- delphi 获取北京时间（使用XMLHTTP获取百度的时间，WebBrowser获取www.timedate.cn的时间）
方法一: uses ComObj, DateUtils; function GetInternetTime: string; var XmlHttp: OleVariant; datetxt: str ...
- logstash Codec
Logstash 使用一个名叫FileWatch的Ruby Gem库来监听文件变化,这个库支持glob扩展文件路径, 而且会记录一个叫.sincedb的数据库文件来跟踪被监听日志文件的当前读取位置,所 ...
- C#尝试读取或写入受保护的内存。这通常指示其他内存已损坏。
安装VS2013后,win7 + .net 4 + c#程序无法连接到SQL Server2000的实例 SQLServer2012在登录远程服务器实例时报错:尝试读取或写入受保护的内存. “尝试读取 ...
- 重新mysql-server
apt-get purge mysql-server │apt-get purge mysql-common │rm -rf /var/log/mysql │rm -rf /var/log/mysql ...