Использование ползунка диапазона для изменения высоты div

Question

Примите примеры с использованием ввода диапазона для управления вращением div с помощью javascript, но не можете увидеть, как изменить его на другие свойства, такие как высота и непрозрачность. Вот пример:

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

Спасибо за любую помощь.

Answer 1

Для более обобщенного решения вы можете создать общий метод setStyleOn. 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 2

<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 3

Там очень много функций, описанных, например, на this site.

Для изменения высоты: вы можете использовать шкалу(), для перемещения позиции: перевод(), для перекос формы: перекос() и т.д. ...

Для непрозрачности, используйте opacity property.