javascript - 如何使用 html 输入从 javascript 动态更改 css 类属性

Question

<script type="text/javascript">
function calculate() {
    var myBox1 = document.getElementById('box1').value;
    var myBox2 = document.getElementById('box2').value;
    if (showAlert(myBox1, 'Width') && showAlert(myBox2, 'Height')) {
        var result = document.getElementById('result');
        var myResult = [(myBox1 * myBox2 * 0.69)/100];
        result.value = parseFloat(myResult).toFixed(2);
    }
}
</script>

.cropper-face,
.cropper-line,
.cropper-point {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  filter: alpha(opacity=10);
  opacity: .1;
}

<input id="box1" type="text" onchange="calculate()"/>
<input id="box2" type="text" onchange="calculate()"/>
<input id="result" type="text" readonly="readonly" onchange="calculate()"/>

我想使用 html 输入字段动态更改宽度和高度属性。

谁能告诉我如何在这段代码中将此输入用作 css 属性宽度和高度

我有两个宽度和高度的文本框。当我在此字段中输入值时，它应该更改此 css 的宽度和高度。

因为有 3 个类具有相同的属性。如何根据用户输入更改其宽度和高度。

提前致谢。

Answer 1

要在输入值更改时动态更改元素尺寸，您必须执行以下操作:

var widthInput = $('#width');
var heightInput = $('#height');
var targetElement = $('#target');

将值设置为元素维度

var onInputChange = function(){
    //getting the values from the width and height inputs
    var width = widthInput.val() || 0;
    var height = heightInput.val() || 0;
    //setting the values we got as the width and height
    //for the element
    targetElement.css({
        width: width + 'px',
        height: height + 'px'
    });
};

像这样监听输入的 keyup 事件

//listening for keyup events for both width and height inputs
//NOTE: I used 'keyup' event and not 'change' like your example
widthInput.keyup(onInputChange);
heightInput.keyup(onInputChange);

这是一个使用 jQuery 的工作示例: http://jsfiddle.net/6cjsLdcj/1/