如何使用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()"/> 

I want to change width and height property dynamically using html input field.

Can anyone tell me how can this possible by using this input as css property width and height in this code

I have two text-box for width & height. and it should be change width and height of this css when I enter values in this field.

As there are 3 classes which has same property. How can I change its width and height according to user input .

Thanks in advance.

Answer 1

To change the element dimensions dynamically when input value changes, you'll have to do the following:

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

set the values as the element dimensions

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

listen to keyup events on the inputs like 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);

Here is a working example using jQuery: http://jsfiddle.net/6cjsLdcj/1/