Javascript 框阴影

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10890946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 11:23:32  来源:igfitidea点击:

Javascript Box Shadow

javascriptcss

提问by Lodder

I have a box that previews a Box Shadow. The user types in the inputs for the lenghts, blur, spread and colour (hex). So far I have this for the output of the style but it obviously doesn't work.

我有一个可以预览 Box Shadow 的框。用户输入长度、模糊、扩展和颜色(十六进制)的输入。到目前为止,我已经将这个用于样式的输出,但它显然不起作用。

document.getElementById('jj_preview3').style["boxShadow"] = jj_input6 + 'px' + jj_input7 + 'px' + jj_input8 + 'px' + jj_input9 + '#' + jj_input10;
  • jj_input6= Horizontal Length
  • jj_input7= Vertical Length
  • jj_input8= Blue Radius
  • jj_input9= Spread
  • jj_input10= Shadow Colour
  • jj_input6= 水平长度
  • jj_input7= 垂直长度
  • jj_input8= 蓝色半径
  • jj_input9= 传播
  • jj_input10= 阴影颜色

What changes do I have to make the the javascript code snippet above to make it work?

我需要做哪些更改才能使上面的 javascript 代码片段起作用?

回答by Maros

It should work if you put in spaces. You're also missing 'px' in the last string literal.

如果您放入空格,它应该可以工作。您还缺少最后一个字符串文字中的“px”。

document.getElementById('jj_preview3').style['boxShadow'] = jj_input6 + 'px ' + 
    jj_input7 + 'px ' + jj_input8 + 'px ' + jj_input9 + 'px #' + jj_input10;

回答by Josh Campbell

Simply for future references:

仅供参考:

 var someVariable = document.getElementById("someId")
 someVariable.style.boxShadow = "5px 5px 1.2em black";

Note: The 1.2emis for the blur effect, but pxcould be used as well, or it can be omitted all together.

注意:1.2em是用于模糊效果,但px也可以使用,或者可以一起省略。