使用范围滑块更改div高度

Question

Seen examples using the range input to control rotation of a div with javascript, but cant see how to change it to other properties such as height and opacity. Here is an example:

function rotate(value)
{
x=document.getElementById('div1')
x.style.webkitTransform="rotate(" + value + "deg)"; 
}


<input type="range" min="0" max="360" value="0" onchange="rotate(this.value)">

Thanks for any help.

Answer 1

<script type="text/javascript">
function divHeight(value)
{
    var x = document.getElementById('div1');
    x.style.height=value+"px"; 
}
</script>


<input type="range" min="0" value="0" onchange="divHeight(this.value)">

Answer 2

For a more generalized solution, you can create a generic setStyleOn method. jsFiddle

JS:

function setStyleOn(rule, targetId, value) {
    x = document.getElementById(targetId);
    x.style[rule] = value;
}

HTML:

<label>Rotation</label>
<input type="range" min="0" max="360" value="0" 
    onchange="setStyleOn('webkitTransform', 'div1', 'rotate(' + this.value + 'deg')">
<label>Opacity</label>
<input type='range' min='0' max='1.0' value='1.0' step='0.1' 
    onchange="setStyleOn('opacity', 'div1', this.value)" />
<label>Height</label>
<input type='range' min='0' max='100' value='10' step='1' 
    onchange="setStyleOn('height', 'div1', this.value + 'em')" />    
<label>Width</label>
<input type='range' min='0' max='100' value='10' step='1' 
    onchange="setStyleOn('width', 'div1', this.value + 'em')" />    
<div id="div1">
</div>

Answer 3

There are many functions explained for example on this site .

For changing height: you can use scale(), for moving position: translate(), for skewing shape: skew() etc...

For opacity, use opacity property .