Question

我正在尝试获取已在不同CSS文件上编写的元素背景样式。问题是我无法获得用CSS文件编写的样式。

另一方面，

可以获得已经写在HTML文档上的样式。

CSS代码

#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>

如您所见，我得到的消息是空的。如果我将ID更改为“try1”，则会显示。

Answer 1

style属性允许您读取和写入每个元素的style HTML属性的值（所谓的内联样式） - 它不会将样式表带入帐户。

要发现CSS属性的真实值，您必须改为使用window.getComputedStyle，例如：

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

<强> See it in action

请注意，IE 8或更早版本不支持getComputedStyle。

Answer 2

将提醒更改为alert(x.style.backgroundColor);

style.background和style.backgroundColor是两回事。

Answer 3

试试这个

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

Answer 4

请改用：

alert(x.style.backgroundColor);

Answer 5

您尚未指定背景值。所以使用这样的东西：

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

demo

无法使用DOM获取背景颜色

CSS代码

HTML code

5 个答案: