September 1, 2009
csylvia
在天空部落發表於11:44:11 |
JavaScript
鼓勵此網誌：0
今天碰到個特別的需求：利用 JavaScript 取得 CSS 的屬性資訊。
我知道如何用 JavaScript 去設定 CSS：
1: document.getElementById("xxx").className = "yyy"; 2: document.getElementById("xxx").style.backgroundColor = "#FFFFFF"; |
在這篇中還有寫到如何直接設定 CSS file：
1: <link rel="stylesheet" type="text/css" id="css" href="firefox.css" /> 2: <span onClick="javascript:document.getElementById('css').href='ie.css'">點我改變樣式</span> |
網路上也有 CSS 和 JavaScript 的屬性對應表：CSS Properties to JavaScript Reference，
這邊也複製一份存放，可點擊這邊展開觀看。
JavaScript 去設定 CSS 其實很簡單，
但要如何利用 JavaScript 獲取 CSS？這就是個問題了。
所幸上網查一下後就得到答案～～ ^^
本來在「how to get CSS information with javascrpt」＆「Javascript: Get a value set by CSS - Xtreme Visual Basic Talk」兩篇得到的資訊是
| Ive had a search around the net and it seems i can use "currentStyle" instead of just "style". Aparently it isnt suported in a lot of browsers but its supported in IE6. Thats fine for me because im only writing this to suit IE6. |
以為只有 IE6 可以這樣做，沒望了，
但後來又找到「JavaScript - Get Styles」、「JavaScript tutorial - DOM CSS」這兩篇，
試試看後總算解決這個問題！
解答就是
1: var obj = document.getElementById("xxx"); 2: var w, h; 3: 4: // for IE 5: if( document.defaultView ) { 6: w = document.defaultView.getComputedStyle(obj,null).getPropertyValue("width"); 7: h = document.defaultView.getComputedStyle(obj,null).getPropertyValue("height"); 8: } 9: // for Mozilla 10: else if( obj.currentStyle ) { 11: w = obj.currentStyle.width; 12: h = obj.currentStyle.height; 13: } |
有網路真好！XD
【Set CSS】
【Get CSS】
- JavaScript - Get Styles
- JavaScript tutorial - DOM CSS
- JavaScript: getComputedStyle() for CSS ‧ mozillaZine Forums
- how to get CSS information with javascrpt
- Javascript: Get a value set by CSS - Xtreme Visual Basic Talk
【Other】
- CSS Properties to JavaScript Reference
- 用 javascript 获取页面上有选择符的 CSS 规则 - javascript, css, style, 选择符, 样式, stylesheet
