元素未顯示設(shè)置width/height時IE中使用currentStyle獲取為auto
更新時間：2014年05月04日 09:35:19 作者：
元素未顯示設(shè)置width/height時IE中無法使用currentStyle獲取，默認(rèn)獲取值為auto,需要的朋友可以參考下
我們知道獲取元素的實(shí)際寬高在IE中可以使用currentStyle屬性。但如果沒有顯示的去設(shè)置元素的寬高，那么使用該屬性將獲取不到，獲取的值為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。如果顯示的設(shè)置了寬高，那么輸出的就是實(shí)際寬高。如下
1，通過內(nèi)聯(lián)style屬性設(shè)置
<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標(biāo)簽設(shè)置
<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
復(fù)制代碼 代碼如下:
<div>abcd</div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.currentStyle.width);
alert(div.currentStyle.height);
</script>
IE6/7/8/9中輸出的都是auto。如果顯示的設(shè)置了寬高，那么輸出的就是實(shí)際寬高。如下
1，通過內(nèi)聯(lián)style屬性設(shè)置
復(fù)制代碼 代碼如下:
<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標(biāo)簽設(shè)置
復(fù)制代碼 代碼如下:
<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
您可能感興趣的文章:
- 通用于ie和firefox的函數(shù) GetCurrentStyle (obj, prop)
- (currentStyle)javascript為何有時用style得不到已設(shè)定的CSS的屬性
- javascript 讀取內(nèi)聯(lián)之外的樣式(style、currentStyle、getComputedStyle區(qū)別介紹)
- style、 currentStyle、 runtimeStyle區(qū)別分析
- 獲取css樣式表內(nèi)樣式的js函數(shù)currentStyle(IE),defaultView(FF)
- getComputedStyle與currentStyle獲取樣式(style/class)
- JS獲取CSS樣式（style/getComputedStyle/currentStyle）
- 前端學(xué)習(xí)筆記style，currentStyle，getComputedStyle的用法與區(qū)別
相關(guān)文章
以JSON形式將JS中Array對象數(shù)組傳至后臺的方法
業(yè)務(wù)是需要將前臺jQuery easyUI DataGrid列表中所選的若干行的數(shù)據(jù)傳到后臺進(jìn)行update操作，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下2014-01-01
js從Cookies里面取值的簡單實(shí)現(xiàn)
遇到一個Js從Cookies里面取值的需求，Js貌似沒有現(xiàn)成的方法可以指定Key值獲取Cookie里面對應(yīng)的值，簡單實(shí)現(xiàn)如下2014-06-06
element select下拉框編輯時回顯已經(jīng)刪除的數(shù)據(jù)操作代碼
今天做項(xiàng)目遇到一個棘手的問題,關(guān)于element select下拉框編輯時回顯問題,下面小編通過實(shí)例代碼介紹element select下拉框編輯時回顯已經(jīng)刪除的數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-05-05
本文主要介紹了基于canvas的二維碼邀請函生成插件。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
js復(fù)制文本到粘貼板(Clipboard.writeText())
這篇文章主要介紹了js復(fù)制文本到粘貼板(Clipboard.writeText())，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
繁簡字轉(zhuǎn)換功能...2006-07-07
微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果示例
這篇文章主要介紹了微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果,結(jié)合實(shí)例形式分析了微信小程序線性漸變及圓形漸變的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了詳解html-webpack-plugin用法全解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了javascript canvas時鐘模擬器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要為大家詳細(xì)介紹了js事件冒泡、事件捕獲和阻止默認(rèn)事件，感興趣的小伙伴們可以參考一下2016-08-08