将 css 值更改为 javascript

Question

我想改变 box-shadow 坐在像这样的代码范围值：

function cssV(){
   var x1 = document.getElementById("range1").value;
    var x2 = document.getElementById("range2").value;
    var x3 = document.getElementById("range3").value;
    var x4 = document.getElementById("range4").value;
 var dic = document.getElementById("test").style;
 /* dic.boxShadow=x1+"px" x2+"px" x3+"px" x4+"px" green;*/
  
  }

#test{
  width:100px;
  height:100px;
    
     background-color: red;
  box-shadow: 0px 0px 22px 10px green;
  
  }

<input type="range" name="range1" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range1"/>
<input type="range" name="range2" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range2"/>
<input type="range" name="range3" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range3"/>
<input type="range" name="range4" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range4"/>
<div id="test"></div>

Answer 1

您可以使用 jquery 的 css 属性设置框阴影，如下所示。确保在代码中添加 jquery。

function cssV(){
   var x1 = document.getElementById("range1").value;
    var x2 = document.getElementById("range2").value;
    var x3 = document.getElementById("range3").value;
    var x4 = document.getElementById("range4").value;
    $("#test).css('box-shadow' , "inset " + x1 +"px " + x2+"px "+ x3+"px "+ x4+"px " + "green");

  }

Answer 2

看看这个工作plunker

dic.boxShadow = x1 + "px " + x2 + "px " + x3 + "px " + x4 + "px " + "green";

将 css 值更改为 javascript

Change css value with javascript

html

javascript

css

box-shadow