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 相关文章推荐
JS对文本框值的判断示例
Mar 10 Javascript
瀑布流布局代码一例
Apr 11 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 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
新版PHP将向Java靠拢
2006/10/09 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
phpwind放自动注册方法
2006/12/02 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
js中生成map对象的方法
2014/01/09 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python科学计算之Pandas详解
2017/01/15 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python之pymysql的使用小结
2019/07/01 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
行为习惯主题班会
2015/08/14 职场文书