javascriptcssbackground-colorgetpropertygetcomputedstyle

getPropertyValue("backgroundColor") returns an empty string

This is my problem:

var mycss = window.getComputedStyle(myelement);

returns a CSSStyleDeclaration object:

CSSStyleDeclaration {0: "animation-delay",..., backgroundColor: "rgb(0, 0, 0)",...}

console.log(mycss);

Then, I want to get the background color, but

mycss.getPropertyValue("backgroundColor");

returns an empty string ""!

Why??

Solution

  • Within your CSSStyleDeclaration, you need to change 'backgroundColor' to 'background-color' and then call

    mycss.getPropertyValue('background-color')

    An example: HTML:

    <head><style>
body {
    background-color: lightblue;
}
</style>
</head>
<body id="body">
  hello world
</body>

    and then calling the getPropertyValue:

    var mycss = window.getComputedStyle(document.getElementById("body"));
myelement.innerHTML = mycss.getPropertyValue("background-color");