javascript - 使用 javascript 更改 css 值

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 属性设置 Box 阴影，如下所示。 确保在代码中添加 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");

  }