javaScript 讀取和設定文件項目的樣式屬性

來源:互聯網
上載者:User

首先我們先說一下樣式表屬性
1. 內聯樣式即元素style屬性裡面設定的,層級最高
2. 頁面樣式表定義即頁面<style></style>裡面定義的,層級次之
3.外部連結樣式表檔案
JavaScript擷取和設定文件項目的css屬性:
1.擷取元素Style屬性裡面設定的樣式屬性,
document.getElementById(id).style.height;
有,則返回屬性值;沒有則返回空
IE和Firefox皆然,只是有的屬性值返回可能不一樣,比如像顏色Firefox返回rgb,而IE是返回十六進位數字
測試代碼:
<script type="text/javascript">
function getCss(){
alert(document.getElementById("aaa").style.height);
alert(document.getElementById("aaa").style.backgroundColor);
alert(document.getElementById("aaa").style.width);
document.getElementById("aaa").style.backgroundColor = ‘#dbdbdb';
//alert(myWidth);
}
</script>
<div id="aaa" class="bbb" style="height:20px; background-color:#FF0000;">
asdfasdfas
</div>
<input type="button" value="點擊" onclick="getCss();" />
2.有時候我們的樣式可能有多個地方設定了,我們也不知道它到底是外部樣式表屬性起作品,還是在內聯樣式裡面起作用,所以我們就需要擷取當前頁面渲染的屬性值。這個在IE和FF裡面有些不同:
範例程式碼片斷:
IE:document.getElementById('aaa').currentStyle.height
FF標準:document.defaultView.getComputedStyle(aaa,null).getPropertyValue('height')
這兩個屬性是唯讀,若要改變元素樣式還得使用style,它直接寫在元素style屬性裡面層級最高起作用
3.寫一個相容IE和FF的函數來調用 複製代碼 代碼如下:function getRealStyle(id,styleName) {
var element = document.getElementById(id);
var realStyle = null;
if (element.currentStyle)
realStyle = element.currentStyle[styleName];
else if (window.getComputedStyle)
realStyle = window.getComputedStyle(element,null)[styleName];
return realStyle;
}

調用:cur_height = parseInt(getRealStyle(CON_ID,'height'));
P.S:傳回值通常會帶有單位,需要使用parseInt函數提取數字,以方便後面的操作

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.