2014-07-17 78 views
0

這裏的CSS的例子塊:爲什麼只能從JavaScript訪問某些CSS樣式?

p { 
    position: relative; 
    color: blue; 
    font-size: 100%; 
    top: 100px 
} 

然後,如果我包括段落標記在被點擊的調用javascript函數:

<p onclick="logStyles(this)">Test</p> 

奇怪的是,只有一些樣式訪問...

function logStyles(obj) { 
    console.log(obj.style.color); 
    console.log(obj.style.position); 
    console.log(obj.style.fontSize); 
}; 

元素的顏色值顯示在控制檯中,我可以將它的值更改爲從我的javascript中說「藍色」。但是後面兩個函數沒有記錄到控制檯,這些樣式值是不可訪問的。

red page.html:16 
    page.html:17 
    page.html:18 

這是爲什麼?我正在運行最新版本的Chrome。

的CSS和JavaScript文件包含通過頭部爲這樣的鏈接:

<script src="js_methods.js"></script> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
+4

的「風格」對象中的DOM節點上只給出了直接與元素,從CSS文件沒有關聯樣式的樣式。 – Pointy

+0

[document.body.style.backgroundColor未定義]的dup(http://stackoverflow.com/q/17588801/1169519)?舉個例子,可能會有更好的帖子。 – Teemu

+1

@Teemu我同意這是一個騙局,但不能完全記住搜索適當的術語。 – TylerH

回答

0

你在談論的計算樣式。這與內聯風格有所不同。

參見:How do I get a computed style?

+0

謝謝你指出。我能夠通過編寫window.getComputedStyle(obj).fontSize來訪問fontSize – Normangorman

0

通過做這種方式你只能得到直接與HTML元素對象關聯的樣式。什麼你要找的是計算方式:

var styles = window.getComputedStyles(elem); 
console.log(styles["color"]); 

mozilla

相關問題