为了叙述简单,这里仅拿width示例。
情景一,元素style属性设置了width/height
<div style="width:100px;">test<div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.style.width);
</script>默认分类
如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下
<div>test<div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.style.width);
</script>
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
<style>
div {width: 100px}
</style>
<div>test<div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.style.width);
</script>
这时候getComputedStyle或currentStyle将会派上用场。
情景二,元素通过引入样式表设置width/height
有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
<style>
div {width: 100px}
</style>
<div>test<div>
<script>
function getStyle(el, name) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null);
}else{
return el.currentStyle;
}
}
var div = document.getElementsByTagName('div')[0];
alert(getStyle(div, 'width'));
</script>
所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以
。如下
<div>test<div>
<script>
function getStyle(el, name) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null);
}else{
return el.currentStyle;
}2011年06月
}
var div = document.getElementsByTagName('div')[0];
alert(getStyle(div, 'width'));
</script>
div 既没有设置style属性,也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高(浏览器默认),但IE6/7/8中却不行,返回的是auto。
注意,这里getStyle方法优先使用getComputedStyle,而IE9已经支持该方法。因此IE9中可以获取到宽高。但IE6/7/8不支持,只能使用currentStyle获取。
分享到:
相关推荐
本文主要介绍了原生js获取浏览器窗口及元素宽高常用方法。具有一定的参考价值,下面跟着小编一起来看下吧
下面小编就为大家带来一篇js获取隐藏元素宽高的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇js获取Html元素的实际宽度高度的方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文主要对原生JS获取元素集合的子元素宽度的实现方法进行介绍,代码详细,具有很好的参考价值,需要的朋友一起来看下吧
获取隐藏元素(display:none)的物理尺寸 问题及场景 假如我们有这样一个输入框,点击能展开选择。如下图: 在这里输入框和下方的展开区域是分离的,独立的两个控件!初始状态下面的可选框是隐藏的(ng-show=false)...
本文主要介绍了js获取图像缩放后的实际宽高,位置等信息的方法,具有很好的参考价值。下面跟着小编一起来看下吧
首先clone一个DOM,设置position:absolute,然后设置top为一个比较大的负值,然后使其显示出来,最后获取到了DOM的宽高后,将其remove。具体代码如下:Js代码 代码如下:function getCss(elem, css){ if (window....
获取元素的宽高有以下几种方法: $(选择器).width() | innerWidth() | outerWidth() $(选择器).height() | innerHeight() | outerHeight() 其中宽和高分别有三个方法: width()和 height()是指元素里面内容的宽高; ...
网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高(ff):document.body.scrollTop; ...
ele.getBoundingClientRect():获取一个元素相对于浏览器视口的的坐标(无论父元素定位与否),返回一个Object对象,该对象有6个属性:top/left/right/bottom/width/height。几乎所有浏览器都支持该方法。jQuery中...
主要介绍了JavaScript中获取高度和宽度函数总结,例如获取视窗大小、可见区域宽、可见区域高、获取元素自身大小等,很方便的一个总结,需要的朋友可以参考下
关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文。 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module...
主要介绍了JS根据浏览器窗口大小实时动态改变网页文字大小的方法,涉及JavaScript针对页面宽高的动态获取与元素样式动态运算的相关技巧,需要的朋友可以参考下
如何利用JS检查元素是否在视口内 分享两个监测元素是否在视口内的... 获取浏览器窗口的宽高 const isElementVisible = (el) => { const rect = el.getBoundingClientRect(); const vWidth = window.innerWidth ||