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

How to change css class property dynamically from javascript using html input

本文关键字：css 属性 动态 javascript 何使用 html 输入      更新时间：2023-09-26

<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输入字段动态更改width和height属性。

有人能告诉我在这个代码中使用这个输入作为css属性的宽度和高度吗

我有两个宽度为&身高当我在这个字段中输入值时，它应该是更改这个css的宽度和高度。

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

提前谢谢。

要在输入值更改时动态更改元素维度，您必须执行以下操作：

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'
    });
};

监听输入上的按键事件，如so

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

相关文章：