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
Javascript Box Shadow
提问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 Lengthjj_input7
= Vertical Lengthjj_input8
= Blue Radiusjj_input9
= Spreadjj_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也可以使用,或者可以一起省略。