mody mody - 4 months ago 11
Javascript Question

Change css value with javascript

I want change

box-shadow
sitting with range value like this code:



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

You can set Box shadow using css property of jquery as below. Make sure you add jquery in your code.

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");

  }