使用javascript向一个元素添加多个css-property box-shadowes

谢谢你

我想向一个元素添加一个带有多个命令的框阴影。如果我使用 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。对不起,那些回答问题的人,认为我的问题在这里,但这并没有改变我的挑战......

第二次编辑我不知道为什么,但代码实际上是有效的。我已经检查了我的代码,但无法说出为什么它之前不起作用......抱歉

尼基尔·古普塔
  1. 它是 boxShadow,而不是 shadowBox 或 shadowBoxes。
    var element2 = document.getElementById("show-editor-button");
    element2.style.boxShadow = "0px 0px 5px green, 0px 0px 5px inset red";

在此处输入图片说明

  1. 如果您有 1 个以上的元素,请使用任何循环来应用所有其他元素,它将什么也不做。
    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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章