Javascript 获取div真实高度
第一种情况就是宽高都写在样式表里。
比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。
第二种情况就是宽和高是写在行内中。
比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。(什么是行内,就是直接在html标签上写样式)
小结,因为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; //宽度
原文:http://www.cnblogs.com/zhwl/p/3858682.html
实际测试过程中,发现上面获取真实高度是有问题,其实无论是设置在样式表还是在行内设置,都会获取到你设置的值,如果要获取真实高度,有如下思路,以行内样式来说:
<div class="article__content article_content" style="height: 703px;"><div></div> </div> 获取真实高度: alert(parseInt($('.article__content div').get(0).offsetHeight));
获取时只要在这个样式里面的div大小,这个就是真实高度。
这里还附带其它的获取高度方法
alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度 alert($(document).width());//浏览器当前窗口文档对象宽度 alert($(document.body).width());//浏览器当前窗口文档body的高度 alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
Javascript 获取div真实高度相关推荐
- Javascript获取div真实高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- 使用普通JavaScript获取div高度
本文翻译自:Get div height with plain JavaScript Any ideas on how to get a div's height without using jQue ...
- html js div 内容高度,JavaScript获取div高度并实现高度监听
demo #demo { width: 100px; height: 200px; background: yellow; margin: 10px; padding: 10px; border: 2 ...
- html字号计算,javascript – 获取div的计算字体大小
众所周知,HTML元素的字体大小可以显式设置为style ="font-size:10px",也可以由浏览器根据样式表和父属性的规则和属性进行计算. 在javascript中计算字 ...
- Javascript获取页面、屏幕尺寸大小参数
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clien ...
- JS获取div滚动条距离实现弹出标签位置动态移动
前些天尝试了一个定位弹出div标签的功能,没有滚动条时用的是绝对位置,有滚动条后就必须在绝对位置XY坐标上减去滚动条吃进的距离,否则定位就不准了. 下面是获取div滚动条距离的JS脚本: <SC ...
- javascript获取asp.net服务器端控件的值(2009-10-31 15:24:26)转载标签:杂谈 分类:技术分类
javascript获取asp.net服务器端控件的值 (2009-10-31 15:24:26) 转载 标签: 杂谈 分类:技术分类 代码如下: <%@ Page Language=" ...
- java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动
原标题:html标签overflow属性和javascript实现div标签滚动 昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scro ...
- JavaScript获取select下拉框中的第一个值
JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DT ...
最新文章
- VSCode + Latex 配置
- 使用Architecture Explorer分析应用程序及使用层次图
- Java解析Json
- 帮助你在移动设备上生成倾斜控制(重力控制)的旋转效果jQuery插件 - lenticular.js...
- matlab dot函数
- python元组可以修改吗_python元组元素可以修改吗
- 1114 Family Property (25 分)
- 通过python和websocket构建实时通信系统[扩展saltstack监控]
- 日常提醒2 (delphi源码)
- 安装使用cuteFTP注意事项
- PyQt5 QTreeView树图
- 怎么给照片加眼镜(二):3D眼镜模型合成法
- 中国地质大学英语语音学习笔记(六):英语连读——辅音连缀与爆破音读好,让连读更顺畅
- layui表格时间格式化
- 选择器(尚硅谷前端网课学习笔记)
- android 阅读 翻页,极速PDF安卓版如何翻页、阅读模式修改等操作详解
- Android webview实现QQ一键登录授权
- 计算机课件文字,计算机应用基础_文字处理wordppt课件.ppt
- pdf怎么拆分成一页一页的?请看详细方法步骤
- TCP的三次握手和四次挥手及常见面试题
热门文章
- RecyclerView悬浮条
- Android notification不能随系统语言切换而更新
- Kmeans算法总结
- 用c语言制作药材标准数据库,自己写的一个简单的数据库...完整开源...
- NVIDIA DLSS2.0 AI渲染又一大飞跃
- 中小企业贷款真的难吗?
- Java程序员必经的实践之路:java控制台在哪里打开
- Redis发布订阅模式实现原理
- centos7 vi保存退出_linux编辑文件保存退出的实操讲解
- IMPORT/EXPORT与SET PARAMETER/GET PARAMETER简单使用