任何人都可以告诉为什么这个switch语句不起作用，总是在javascript中转到默认情况？

Question

switch (document.getElementById("box").style.borderBottomColor.value) {
    case "#0000FF":
        document.getElementById("box").style = "margin:25px; height:0; width:0; border-left:75px solid #0000FF; border-right:75px solid #0000FF; border-top:75px solid #0000FF; border-bottom:75px solid #0000FF; border-radius:50%";
        break;

    default:
        document.getElementById("box").style = CircleStyle;

    }

Answer 1

它是默认情况，因为document.getElementById("box").style.borderBottomColor是一个字符串，当设置时，并没有value属性。

另外，作为旁注，请注意除非您通过样式明确设置特定属性，否则必须获取computed style才能在CSS代码中设置属性的初始值。

最后，虽然与您的问题无关，但您设置样式的方式是错误的。您不能将字符串设置为style对象 - 这是一种只读的方式 - 就像您在HTML中的style属性中所做的那样。您必须直接将所需的属性设置为style对象的属性。在您的帖子下查看Xufox's comment，因为它提供了一些有用的链接供您查看。

正确的例子：

var box = document.getElementById("box");

switch (box.style.borderBottomColor) {
    case "#0000FF":
        box.style.margin = "25px";
        box.style.height = 0;
        //...
        break;

    default:
        box.style.margin = 0;
        box.style.height = "auto";
}

Answer 2

只是想分享，以下更正了代码。感谢您对Computed Style方法的想法，因为我建议您进一步挖掘。

var elem = document.getElementById("box");

switch (window.getComputedStyle(elem, null).getPropertyValue("border-bottom-color")){                                          

    case 'rgb(0, 0, 255)':

          elem.style = "margin:25px; height:0; width:0; border-left:75px solid #0000FF; border-right:75px solid #0000FF; border-top:75px solid #0000FF; border-bottom:75px solid #0000FF; border-radius:50%";
    break;

    default:
          elem.style = CircleStyle;

}