Question

我希望通过点击来更改#demo边框颜色，但只有在没有给出css颜色时它才会更改。我想将#demo div边框颜色从透明变为红色。请帮帮我:)。

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Paslėpti daiktai</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <script>
        function myFunction() {
            document.getElementById("demo").style.color = "red";
        }
    </script>
</head>

<body>
<div class="pagrindas">
    <img src="http://i.imgur.com/MxRlCi1.jpg" />
    <div id="demo" onclick="myFunction()" class="daiktas"></div>
</div>
</body>

</html>

CSS：

.pagrindas {
    position: relative;
}

.daiktas {
    width:50px;
    background-color: transparent;
    border:3px solid;
    border-radius: 100%;
    position:relative;
    left:195px;
    top:7px;
    padding:0px;
    margin:0px;
    height:50px;
}

img {
    position: absolute;
    top: 0px;
    left: 0px;
}

Answer 1

非常有趣的问题。根据{{1}} border-color财产上的W3C specification：

如果未使用border属性指定元素的边框颜色，则用户代理必须使用元素的'color'属性的值作为边框颜色的计算值。

这就是为什么在代码中设置document.getElementById("demo").style.color = "red"也会使边框变红的原因。

在您的情况下，CSS规则border: 3px solid;未定义border-color属性，仅定义border-style和border-width，因此观察到的行为。

Answer 2

您的脚本几乎正确尝试使用此脚本

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Paslepti daiktai</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />

    <script>
        function myFunction() {
            var element = document.getElementById('demo');
            element.style = "border-color: red;"
        }
    </script>
</head>

<body>
<div class="pagrindas">
    <img src="http://i.imgur.com/MxRlCi1.jpg" />
    <div id="demo" onclick="myFunction()" class="daiktas" onclick="myFunction()" style=""></div>
</div>
</body>

</html>

在你的脚本中，你提到它是颜色，但我们说它的边界边框颜色。

css中的颜色用于字体着色。

Answer 3

使用

document.getElementById("demo").style.borderColor

而不是

document.getElementById("demo").style.color

课程.color改变文字颜色但不改变边框颜色。

http://www.w3schools.com/jsref/prop_style_bordercolor.asp

Answer 4

根据答案，您可以在这里找到一个有效的例子：

http://jsfiddle.net/649xuofp/

function myFunction() {
    var element = document.getElementById('demo');
    document.getElementById("demo").style.borderColor = "red";
}

HTML改变div颜色。代码无效

4 个答案: