Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我想使用html输入字段动态更改width和height属性。

任何人都可以通过在此代码中使用此输入作为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'
    });
};

听取输入上的键盘事件

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

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

1 个答案: