How i get external CSS value From external JS file?

Question

I wanna to get element background value from javascript file. I has three files -

html.html
css.css
js.js

html.html

<!DOCTYPE html>
<html>
<head>
    <title> I'm Button! </title>
    <link rel="stylesheet" type="text/css" href="css.css"/>
    <script type="text/javascript" src="js.js"></script>
</head>
<body>
    <div class="myBlock" onclick="heyJS()"></div>

</body>
</html>

css.css

.myBlock {
  width: 300px; max-width: 100%;
  height: 100px; max-height: 100%;
  margin: 0 auto; margin-top: 100px; 
  font-size: 50px; font-weight: lighter; font-style: normal; text-align: center;
  line-height: 100px; position: relative;
  background-color: #83DF31;
}

js.js

function heyJS() {
    alert(document.getElementsByClassName('myBlock')[0].style.backgroundColor);
}

After running the scrpit,I only get blank alert box.

How can i get div background value ?

Zee · Accepted Answer · 2015-04-10 09:14:31Z

3

You can replace your alert() with this

alert(window.getComputedStyle(document.getElementById('myBlock')).backgroundColor);

or

alert(window.getComputedStyle(document.getElementsByClassName('myBlock')[0]).backgroundColor);

And modify your html a little bit if you using the first one.

<div id="myBlock" class="myBlock" onclick="heyJS()"></div>

edited Apr 10, 2015 at 9:14

answered Apr 10, 2015 at 8:51

Zee

8,4805 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lwinkyawmyat Over a year ago

Thank brother,why not working in alert(window.getComputedStyle(document.getElementsByClassName('myBlock')).backgroundColor);

Zee Over a year ago

Well, good question :) But I guess it is defined in that way. You will find more about it here developer.mozilla.org/en-US/docs/Web/API/Window/…

Shaggy · Accepted Answer · 2015-04-10 08:53:08Z

1

Try the following:

window.getComputedStyle(document.querySelector(".myblock")).getPropertyValue("background-color");

answered Apr 10, 2015 at 8:53

Shaggy

6,8062 gold badges27 silver badges47 bronze badges

Collectives™ on Stack Overflow

How i get external CSS value From external JS file?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related