使用Javascript在div周围动态添加边框很困难

Question

我们有一个＆＃34;条款和条件＆＃34;复选框，以及＆＃34;下订单＆＃34;点击，除其他外，我想验证条款和条件是否被选中，如果没有，请在周围的div周围添加一个细红色边框。我无法让以下工作。

if (!terms.checked) {
    console.log(terms.parentNode.parentNode);
    terms.parentNode.parentNode.style.border = '1px red';
    //terms.parentNode.parentNode.style.borderWidth = '1px';
    //terms.parentNode.parentNode.style.borderColor = 'red';
}

我知道我的Javascript正在获取正确的节点，因为当我将其记录到控制台然后将鼠标悬停在它上面时，它会突出显示该元素。正如您从注释掉的行中看到的那样，我尝试单独添加borderWidth和borderColor，但也无济于事。

我已经提到了https://developer.mozilla.org/en-US/docs/Web/CSS/border和https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style，并且无法弄清楚我应该做些什么。我也创造了以下小提琴无济于事：https://jsfiddle.net/LLdozham/

Answer 1

我认为您只需添加solid即可：1px solid red

Answer 2

你没有提到你的border-style财产应该是什么。 border-style属性指定要显示的边框类型。

根据您的需要，您需要提及以下任意一项border-style值：

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

用法： terms.parentNode.parentNode.style.border = '1px solid red';

Answer 3

我认为您需要添加边框样式实体，例如＆lt; 1px solid red＆＃39;