元素未顯示設(shè)置width/height時IE中使用currentStyle獲取為auto
更新時間:2014年05月04日 09:35:19 作者:
元素未顯示設(shè)置width/height時IE中無法使用currentStyle獲取,默認(rèn)獲取值為auto,需要的朋友可以參考下
我們知道獲取元素的實際寬高在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è)置了寬高,那么輸出的就是實際寬高。如下
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è)置了寬高,那么輸出的就是實際寬高。如下
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)文章
查詢綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼
查詢綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼2009-12-12詳解html-webpack-plugin插件(用法總結(jié))
這篇文章主要介紹了詳解html-webpack-plugin插件(用法總結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09JavaScript中展開運算符及應(yīng)用的實例代碼
這篇文章主要介紹了JavaScript中展開運算符及應(yīng)用的實例代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01一篇文章弄懂javascript中的執(zhí)行棧與執(zhí)行上下文
這篇文章主要給大家介紹了關(guān)于javascript中執(zhí)行棧與執(zhí)行上下文的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08關(guān)于在Servelet中如何獲取當(dāng)前時間的操作方法
下面小編就為大家?guī)硪黄P(guān)于在Servelet中如何獲取當(dāng)前時間的操作方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06微信小程序中做用戶登錄與登錄態(tài)維護(hù)的實現(xiàn)詳解
微信小程序的運行環(huán)境不是在瀏覽器下運行的。所以不能以cookie來維護(hù)登錄態(tài)。下面這篇文章主要給大家介紹了微信小程序中如何做用戶登錄與登錄態(tài)維護(hù)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考學(xué)習(xí)。2017-05-05詳解js如何優(yōu)雅處理后端返回的單元格數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了JavaScript如何優(yōu)雅處理后端返回的單元格數(shù)據(jù),文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能使用探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01