Question

我在使用JavaScript。我正面临一个问题，即我想动态地在div标签周围放置边框。我的COde在下面：

function myfunction(var1) {
    if (document.getElementById(var1).style.border = "0px") {
        document.getElementById(var1).style.border = "1px solid green";
    } else {
        document.getElementById(var1).style.border = "0px";
    }
}

代码首次放置边框但从不删除它。即其他部分不起作用。任何帮助将不胜感激。

Answer 1

您的陈述不正确。它应该是......

function myfunction(var1) {
    if(document.getElementById(var1).style.border == "0px") {
        document.getElementById(var1).style.border = "1px solid green";
    } else {
        document.getElementById(var1).style.border = "0px";
    }
}

在JavaScript =中是赋值运算符。对于比较，您应该使用等于运算符==。

您的语句将0px分配给元素，然后停止。 else永远不会触发，因为每次分配的评估结果为true。

Comparison Operator             Example    Result
==  Equal To                    x == y     false
!=  Not Equal To                x != y     true
<   Less Than                   x < y      true
>   Greater Than                x > y      false
<=  Less Than or Equal To       x <= y     true
>=  Greater Than or Equal To    x >= y     false

正如下面的评论中所提到的，身份运算符（===）实际上会优于等于运算符（==）。 identity（===）运算符的行为与equality（==）运算符的行为相同，但不进行类型转换，并且类型必须相同才能被视为相等。在这种情况下，字符串将与另一个字符串进行比较，因此可以使用===代替。

Answer 2

你的if应该包含逻辑运算符：

if(document.getElementById(var1).style.border = "0px")

到

if(document.getElementById(var1).style.border == "0px")

Answer 3

你的if条件总是如此：

style.border = "0px"

=为您的元素指定样式border = 0px，它始终为真。您需要使用比较运算符==或更好的身份运算符===：

style.border == "0px"

另外，如果第一次检查条件，则必须查看属性是否已设置，因为style.border仅识别内联样式，因此很可能未在开头设置。

干净的方式是：

var el = document.getElementById(var1);
if(!el.style.border || el.style.border == "0px")
    el.style.border = "1px solid green";
} else {
    el.style.border = "0px";
}

Answer 4

每个人都发现了分配错误，但代码有时可能无法正常工作。

边框属性值，当你阅读它时，不一定是你写的，而是浏览器的

它的解释和速记赋值通常会为缺少的规格继承默认属性。

计算机可能看不到边框分配为“0x”，而是

'solid black 0px'，或者它可能不存在，除了作为单独的属性 -

无论你如何按字面意思设置它。

更详细的检查，仔细查看返回的值是肯定的：

if(parseInt(document.getElementById(var1).style.borderTopWidth)){
    // the element has a non-zero border width
}

Answer 5

你想要做

if(document.getElementById(var1).style.border == "0px") // note two = signs

不

if(document.getElementById(var1).style.border = "0px")

我原以为你想把边框设置为'无'

document.getElementById(var1).style.border = "none";

javascript样式比较不起作用

5 个答案: