admin管理员组

文章数量:1277899

I'm trying to get element background style which has been written on a different CSS file. The problem is that I can't get the style which were written in a CSS file.

on the other hand, styling which has been written on the HTML document are possible to get.

CSS code

#try2
{ 
    background-color:yellow;
}
body
{
    background-color:gray;
}
td, th{
    border: 1px solid black;
}

HTML code

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
        <link rel="stylesheet" type="text/css" href="html.css">
        <script type="text/javascript" src="external.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td id = "try1" style="background-color:green;"><p id="ChosenColor3"> htmlfile</p></td>
            </tr>
            <tr>
                <td id = "try2"><p id="ChosenColor4"> css file</p></td>
                <td><button id="bestRated3" onclick = arrayTest()> ב.מ </button></td>
                <td><button id="submitForm" onclick = submit()> end</button></td>
            </tr>
            <tr>
                <td><h1 id="ChosenColor5"> text </h1></td>  
            </tr>
        </table>
    </body>
    <script>
        window.onload=aaa();
        function aaa()
        {
            var x = document.getElementById("try2");
            alert(x.style.background);
        }
    </script>     
</html>

As you can see, the message I get is empty. If I will change the ID to "try1" it will be displayed.

I'm trying to get element background style which has been written on a different CSS file. The problem is that I can't get the style which were written in a CSS file.

on the other hand, styling which has been written on the HTML document are possible to get.

CSS code

#try2
{ 
    background-color:yellow;
}
body
{
    background-color:gray;
}
td, th{
    border: 1px solid black;
}

HTML code

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
        <link rel="stylesheet" type="text/css" href="html.css">
        <script type="text/javascript" src="external.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td id = "try1" style="background-color:green;"><p id="ChosenColor3"> htmlfile</p></td>
            </tr>
            <tr>
                <td id = "try2"><p id="ChosenColor4"> css file</p></td>
                <td><button id="bestRated3" onclick = arrayTest()> ב.מ </button></td>
                <td><button id="submitForm" onclick = submit()> end</button></td>
            </tr>
            <tr>
                <td><h1 id="ChosenColor5"> text </h1></td>  
            </tr>
        </table>
    </body>
    <script>
        window.onload=aaa();
        function aaa()
        {
            var x = document.getElementById("try2");
            alert(x.style.background);
        }
    </script>     
</html>

As you can see, the message I get is empty. If I will change the ID to "try1" it will be displayed.

  • javascript
  • html
  • css
  • dom
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Sep 4, 2013 at 8:13 Doron CohenDoron Cohen 2456 silver badges15 bronze badges 1
  • 3 Should write window.onload=aaa;. #try2 does not have style attribute. – sinsedrix Commented Sep 4, 2013 at 8:16
Add a ment  | 

5 Answers 5

Reset to default 9

The style property lets you read and write the value for each element's style HTML attribute (what is called its inline style) -- it does not take stylesheets into account.

To discover what the real value of a CSS attribute is you have to use window.getComputedStyle instead, for example:

alert(getComputedStyle(x, null).getPropertyValue("background-color"));

See it in action.

Please note that getComputedStyle is not supported by IE 8 or earlier.

Change your alert to alert(x.style.backgroundColor);

style.background and style.backgroundColor are two different things.

Try this 

   function aaa()
        {
           var a = document.getElementById("try2").style.backgroundcolor;
           alert("Your background color is :"+a);
        }

Use this instead:

alert(x.style.backgroundColor);

You have not assigned the value for background. So use something like this:

alert(x.style.background="red");

demo

本文标签： javascriptCan39t get the background color using DOMStack Overflow

版权声明：本文标题：javascript - Can&#39;t get the background color using DOM - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741281898a2370056.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。