`
zhouyrt
  • 浏览: 1162124 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

元素未显示设置width/height时IE中无法使用currentStyle获取(默认为auto)

 
阅读更多

我们知道获取元素的实际宽高在IE中可以使用currentStyle属性。但如果没有显示的去设置元素的宽高,那么使用该属性将获取不到,获取的值为auto。如下

<div>abcd</div>
<script>
	var div = document.getElementsByTagName('div')[0];
	alert(div.currentStyle.width);
	alert(div.currentStyle.height);
</script>

 

IE6/7/8/9中输出的都是auto。如果显示的设置了宽高,那么输出的就是实际宽高。如下

1,通过内联style属性设置

<div style="width:100px;height:50px;">abcd</div>
<script>
	var div = document.getElementsByTagName('div')[0];
	alert(div.currentStyle.width);
	alert(div.currentStyle.height);
</script>

 

2,通过页面嵌入style标签设置

<style>
	div {
		width: 100px;
		height: 50px;
	}
</style>
<div>abcd</div>
<script>
	var div = document.getElementsByTagName('div')[0];
	alert(div.currentStyle.width);
	alert(div.currentStyle.height);
</script>

 

都将输出:100px,50px

0
0
分享到:
评论

相关推荐

    元素未显示设置width/height时IE中使用currentStyle获取为auto

    在Internet Explorer(IE)浏览器中,一个常见的问题是当元素没有显式设置`width`或`height`时,尝试使用`currentStyle`属性来获取元素尺寸可能会得到`auto`作为返回值,而不是实际的宽度和高度。这是因为`...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    然而,当我们尝试获取一个CSS样式为display:none的元素的高度和宽度时,会发现常规的JavaScript方法无法直接获取这些尺寸值,因为display:none的元素没有物理尺寸。为了获得这些隐藏元素的尺寸信息,需要采用一些...

    javascript获取非行间样式的方法

    在IE9及以下版本中,我们可以使用`currentStyle`属性来获取元素的计算样式(即实际应用到元素的样式)。例如: ```javascript odiv.currentStyle.width ``` 然而,`currentStyle`是IE特有的,其他浏览器如Firefox...

    【JavaScript源代码】JavaScript style对象与CurrentStyle对象案例详解.docx

    `Style` 对象主要用来获取元素的内联样式,即元素标签中`style`属性的值。 **例子**: ```javascript // 内部样式 &lt;style type="text/css"&gt; #div { color: gray; } &lt;/style&gt; // 内联样式 ;"&gt;&lt;/div&gt; // 获取...

    javascript获取隐藏元素(display-none)的高度和宽度的方法.docx

    这些元素可能因为某些逻辑原因被设置为 `display: none`,这使得常规获取元素尺寸的方法(如 `.offsetWidth`, `.offsetHeight`, `getBoundingClientRect()` 等)无法正常工作,因为它们返回的值都是 0。 #### 二、...

    getComputedStyle与currentStyle获取样式(style/class)

    在这个例子中,当页面加载完成后,`getStyle` 函数被调用来获取id为 `div1` 的元素的宽度,并弹出警告框显示结果。 总的来说,理解和掌握 `getComputedStyle` 和 `currentStyle` 是JavaScript中处理CSS样式的关键,...

    IE6升级到IE9兼容性问题和操作手册

    2. **currentStyle对象**:IE8中,`currentStyle`对象的`Unset`属性现在返回其初始值,而不再是未定义,这对获取元素状态的代码有影响。 3. **style对象**:同样,`style`对象的`Unset`属性值在IE8中返回空字符串,...

    解决ie6的定位问题 position fiexed

    但在IE6中,此属性无法正常工作,导致元素失去了预期的固定位置行为。为了解决这个问题,我们需要一种兼容IE6的方法来模拟`position: fixed;`的效果。 #### 解决方案 为了克服IE6中的这一限制,可以采用以下策略: ...

    获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)

    在IE浏览器中,可以使用`currentStyle`属性直接获取,而在Firefox等基于Gecko引擎的浏览器中,则使用`defaultView`对象结合`getComputedStyle`方法来获取元素的最终样式。这是因为不同浏览器对于DOM样式的处理方式...

    各情景下元素宽高的获取实现代码

    在情景一中,当元素的`style`属性直接设置了`width`或`height`时,可以使用`el.style.width`或`el.style.height`来获取。但如果未在`style`属性中设置,这两个属性将返回空字符串。在这种情况下,应当利用`...

    js获取某元素的class里面的css属性值代码

    2. 如果元素有 `currentStyle` 属性(IE6 至 IE8),那么使用 `obj.currentStyle[attr]` 获取样式值。 3. 如果没有 `currentStyle`,则使用 `document.defaultView.getComputedStyle(obj, null)[attr]`,这是非 IE ...

    IE及firefox下获取及设置样式值的代码

    例如,如果你想要获取一个名为`div`的元素的`width`,在IE中可以这样写: ```javascript var div = document.getElementById('div'); var width = div.currentStyle.width; ``` 而在Firefox及其他遵循W3C标准的...

    JS打开关闭移动层动画实例

    - 当使用IE浏览器时,由于`select`元素默认具有较高的Z-index值,可能会遮挡浮动层。因此,创建一个`iframe`作为遮罩层来解决这一问题。 - 使用`getElementsByTagName`获取页面中的所有`iframe`,并检查其是否有`...

    javascript针对DOM的应用分析(三).docx

    而对于外部样式表,通常需要使用`currentStyle`或`getComputedStyle`方法获取样式,但无法直接修改,需切换到内联样式进行修改。 接下来,我们讨论如何用JavaScript动态创建DOM元素。动态创建DOM元素是实现网页动态...

    JavaScript Table行定位效果

    要注意虽然ie的cloneNode参数是可选的(默认是false),但在ff是必须的,建议使用时都写上参数。 还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他...

Global site tag (gtag.js) - Google Analytics