Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
357 views
in Technique[技术] by (71.8m points)

Reading non-inline CSS style info from Javascript

I know I must be missing something here, but I cannot seem to get this to work.

I have assigned a background color to the body of an html document using the style tags inside the head section of the document, but when I try to read it via JavaScript, I get nothing:

<html>
<head>
<style>
body { background-color: #ff0; }
</style>
</head>
<body>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>

.. however, if I assign the style inline, it works:

<html>
<head></head>
<body style='background-color: #ff0;'>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>

I know I am missing something basic, but my mind is not in the zone today -- can anyone tell me why my first scenario is not working?

Thanks

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The style property of a DOM element refers only to the element's inline styles.

Depending on the browser, you can get the actual style of an element using DOM CSS

In firefox, for example:

var body = document.getElementsByTagName("body")[0];
var bg = window.getComputedStyle(body, null).backgroundColor;

Or in IE:

var body = document.getElementsByTagName("body")[0];
var bg = body.currentStyle.backgroundColor;

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...