我想向一个元素添加一个带有多个命令的框阴影。如果我使用 css 来做,这很容易:
box-shadow: 0px 0px 5px green, 0px 0px 5px inset red; /* css */
但我不知道如何只使用 javascript 来做到这一点。
element.style.boxShadow= '0px 0px 5px green, 0px 0px 5px inset red'; /* javascript */
它不起作用。
就好像该命令只能包含一行 css:
element.style.boxShadow= '0px 0px 5px green';
(这有效,但我想要更多......)
我试过把 box 放在复数形式 - 为了好玩 ;)
element.style.boxShadows= '0px 0px 5px green, 0px 0px 5px inset red';
或使用另一个分隔符:
element.style.boxShadow= '0px 0px 5px green;|[space] 0px 0px 5px inset red';
但总是有同样令人失望的结果......
如何解决这个问题?
编辑:我犯了一个愚蠢的错字:命令是 - 当然 - 不是 shadowBox,而是 boxShadow。对不起,那些回答问题的人,认为我的问题在这里,但这并没有改变我的挑战......
第二次编辑我不知道为什么,但代码实际上是有效的。我已经检查了我的代码,但无法说出为什么它之前不起作用......抱歉
var element2 = document.getElementById("show-editor-button");
element2.style.boxShadow = "0px 0px 5px green, 0px 0px 5px inset red";
var elements = document.getElementsByClassName('js-vote-down-btn');
for(var i = 0; i < elements.length ; i++){
elements[i].style.boxShadow = "0px 0px 5px green, 0px 0px 5px inset red";
};
您可以通过在此页面本身的控制台中运行它来尝试此代码。
了解更多关于 box-shadow => https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句