0

I need to pass the tag data to the function and read it in that function , I tried to pass the tag via "this" , i could change some style elements but i couldn't read the style data there. What is the problem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
<script>
function paint(tab){
    window.alert(tab.style.backgroundColor); // It can't show current color
    tab.style.backgroundColor="#000000";
}
</script>
<style>
div.vtab {
  background-color:#ff0000;
  height: 80px;
  left: 20px;
  position: absolute;
  width: 80px;
  cursor:pointer;
}
</style>

</head>

<body>
<div onclick="javascript:paint(this)" class="vtab" ></div>
</body>
</html>
Amin Gholibeigian
  • 33
  • 1
  • 5

1 Answers1

3

The style object on elements only has the style information applied specifically to the element, not information applied to it via stylesheets. So to start with, your tab.style.backgroundColor will be blank, because there's no style="background-color: ..." on the element.

To get the computed style of an element, you use the getComputedStyle function (on anything modern) or the currentStyle property (on old IE):

alert(getComputedStyle(tab).backgroundColor);

For old IE, a simple shim is easily added:

if (!window.getComputedStyle) {
    window.getComputedStyle = function(element, pseudo) {
        if (typeof pseudo !== "undefined") {
            throw "The second argument to getComputedStyle can't be polyfilled";
        }
        return element.currentStyle;
    };
}

Example:

if (!window.getComputedStyle) {
  window.getComputedStyle = function(element, pseudo) {
    if (typeof pseudo !== "undefined") {
      throw "The second argument to getComputedStyle can't be polyfilled";
    }
    return element.currentStyle;
  };
}
var div = document.querySelector(".foo");
snippet.log("Background color before changing: " +
            getComputedStyle(div).backgroundColor);
setTimeout(function() {
  div.style.backgroundColor = '#4ff';
  snippet.log("Background color after changing: " +
              getComputedStyle(div).backgroundColor);
}, 1000);
.foo {
  background-color: #ff4;
}
<div class="foo">My background is yellow to start with, because of the class <code>foo</code>, then code turns it cyan</div>

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875