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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
js实现3D照片墙效果
Oct 28 Javascript
js实现点赞效果
Mar 16 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP中for循环语句的几种变型
2007/03/16 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python日期的加减等操作的示例
2017/08/15 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
行政人员工作职责
2013/12/05 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
高校教师岗位职责
2014/03/18 职场文书
行风评议整改报告
2014/11/06 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
MySQL如何解决幻读问题
2021/08/07 MySQL
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python