javascript - 使用范围 slider 更改 div 高度

Question

看到使用范围输入控制 javascript 旋转 div 的示例，但看不到如何将其更改为其他属性，例如高度和不透明度。这是一个例子:

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>