js获取Html元素的实际宽度高度的方法


Posted in Javascript onMay 19, 2016

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。

小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。

现 在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取的样式没有相对应的(就像#div1.style.width对 应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属性”之类的。

代码:

var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度

以上这篇js获取Html元素的实际宽度高度的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
详解Vue之计算属性
Jun 20 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
js获取隐藏元素宽高的实现方法
May 19 #Javascript
jquery实现无刷新验证码的简单实例
May 19 #Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 #Javascript
JavaScript:Array类型全面解析
May 19 #Javascript
JavaScript:Date类型全面解析
May 19 #Javascript
javascript中对Date类型的常用操作小结
May 19 #Javascript
JS Attribute属性操作详解
May 19 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
详解Python字符串对象的实现
2015/12/24 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
python实现tail -f 功能
2020/01/17 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
管理部部长岗位职责
2013/12/05 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
大学生自荐信范文
2015/03/05 职场文书
2015年资料员工作总结
2015/04/25 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
分享python函数常见关键字
2022/04/26 Python