First, the js code needs to create the html tag element first to adjust the picture display size of the specified id tag in the form element of the web input box.
The code is as follows:
Effect preview:
<div><img id="tupian" src="1.jpg" ></div>The sample picture address
The width of the picture：<input type="text" id="wq-tool" size="18" value=""/>
Picture height：<input type="text" id="wq-com" size="18" value=""/>
<div id="picinfo"></div>
We created an img tag with the id name tupian and two text boxes for resizing the picture display for wq-tool, wq-com and picinfo, respectively, and a div tag to display real-time value adjustments.
Next, you need to use the js code to manipulate the elements:
<script type="text/javascript">
var tupiandx = document.getElementById('tupian');
var imgwh = new Image();
imgwh.onload = function () {
var w = imgwh.width;
var h = imgwh.height;
document.getElementById('wq-tool').value=imgwh.width;
document.getElementById('wq-com').value=imgwh.height;
document.getElementById('picinfo').innerHTML = "Picture preview parameters: width "+w+" height "+h;
}
imgwh.src =tupiandx.src;
var wiii=document.getElementById('wq-tool');
var heee=document.getElementById('wq-com');
wiii.oninput = function(){
document.getElementById('picinfo').innerHTML = "Picture preview parameters: width "+wiii.value+" height "+heee.value;
tupiandx.style.width=wiii.value+"px";
}
heee.oninput = function(){
document.getElementById('picinfo').innerHTML = "Picture preview parameters: width "+wiii.value+" height "+heee.value;
tupiandx.style.height=heee.value+"px";
}
</script>
A new Image object, imgwh, is created, and then you need to define the imgwh.onload function first.
In the image objects we define, the .width and .height properties can quickly get the width and height of the picture in the specified src picture object, and then initialize them to the resized text boxes so that they have an initial value reference in the first place.
And then next imgwh.src src .tupiandx.src;
The src property of the Image object is assigned to the src address of the picture on the page, which quickly caches a picture in the browser. You can use the basic information of the object's .width and .height attributes directly to the picture.
This sentence must be placed after the imgwh.onload function, because when the picture is loaded once and the picture is requested to be previewed again, because the browser has cached the picture, it will not send a new request again, but will load it from the browser's cache. For common browsers, they usually load pictures of onload events, but some browsers will not process onload events again. So it needs to be put in the back.
Then use document.getElementById (')" to continue to pick up the id values wq-tool and wq-com text boxes, name them wiii and heee.
When a specified value is written in the text box of a Web page, an oninput event is generated, which allows you to dynamically get the change in the value of the input input box for the specified id by listening for the oninput event.
heee.oninput = function(){}
Do this when the numbers in the specified text box change:
document.getElementById ('picinfo').
Modify the width of the element in the picture in the web page to the value of the value of the wiii bound object.
tupiandx.style.width=wiii.value+"px";
Then through the above code can adjust the width and height of the specified picture elements displayed in real time in the web page, and then display.