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(' ...
随机推荐
- linux定时执行
/root/crontab-conf文件为root用户定时执行计划文件 命令:crontab -l 说明:列出定时执行的计划列表 命令:crontab -e 说明:编辑定时执行的计划文件 ...
- iBatis核心框架浅析
1.1 iBatis配置与运行 1.dal 层的dao接口实现类通常会继承SqlMapClientDaoSupport.spring容器在初始化一个dao bean实例时,通常会注入两块信息DataS ...
- ie8下的透明 问题
团队里经常遇到,索性整理一起 是我们在前端开发中经常遇到的,在问题中经常遇到的两个问题是背景色透明和整体透明 先说下背景色透明,背景色透明,在现代浏览器中,可以用rgba颜色作为背景色. 简单介绍下r ...
- Oracle EBS-SQL (PO-13):检查采购物料无一揽子协议价格.sql
Select msi.segment1 物料编码, msi.DESCRIPTION ...
- QT GUI（主）线程与子线程之间的通信——使用跨线程的信号槽
在主线程上,可以控制子线程启动,停止,清零 如果子线程启动的话,每一秒钟会向主线程发送一个数字,让主线程更新界面上的数字. 程序截图: 上代码: #include <QtGui> #inc ...
- 解决：getWeatherbyCityName(city)，服务器无法处理请求。 ---> 未将对象引用设置到对象的实例。
原文:getWeatherbyCityName(city),服务器无法处理请求. ---> 未将对象引用设置到对象的实例. 解决方法:不要直接使用 “服务引用” , 添加为 “Web 引用” 最 ...
- css案例学习之float浮动
代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- HTML标签实现图片滚动显示
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- today reading notes
paminit manager from upstart to systemd/systemctl;Vivid Vervet + openStack kilo;为容器开发者(OpenStack工作环 ...
- 开源 iOS 项目分类索引大全
GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Category类型的库,附带很多自定义 ...