您好，是否可以从表单输入中获取用户输入的高度和宽度，并以厘米为单位调整图片大小作为输出？
我正在尝试制作一个页面，该页面从用户输入中获取宽度和高度，并在单击提交表单后调整 mtFuji 图片的大小，请帮助我，因为我必须完成这项任务，非常感谢！
<body>
<section>
<div id="backgroundDiv">
<div id="mainDiv">
<div class="form-control">
<form id="form" class="form" action="" method="GET">
<div class="form-control">
<label for="height">Height :</label>
<input type="number" name="height" placeholder="(9-12.cm)" id="height" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="weight">Width :</label>
<input type="number" name="width" placeholder="(14-24.cm)" id="width" /></br>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<button id="next" value="next" onclick="goToPreview(), resizeImage();">submit</button>
<button id="print" value="print" onclick="window.print()">print</button>
</div>
</form>
</div>
<img id="mtFuji" src="resources/mt.fuji.jpg" alt="Mt.Fuji">
</section>
潇湘沐2回答
-
天涯尽头无女友
尝试这个。const resizeImage = () => { const getId = (id) => document.getElementById(id); let height = getId('height').value ? `${getId('height').value}cm` : 'auto'; let width = getId('width').value ? `${getId('width').value}cm` : 'auto'; getId("mtFuji").style.height = height; getId("mtFuji").style.width = width;}<body> <form> <label for="height">Height :</label> <input type="number" name="height" placeholder="(9-12.cm)" id="height" /> <label for="weight">Width :</label> <input type="number" name="width" placeholder="(14-24.cm)" id="width" /> <button onclick="resizeImage();" type="button">Resize</button> <button onclick="window.print()">print</button> </form> <img id="mtFuji" src="https://blush-design.imgix.net/collections/40G09koP55fYh86yZDnX/b29c577b-5364-44c1-ae0b-b48c9e37676e.png?w=800&auto=format" alt="Mt.Fuji"></body> -
慕桂英4014372
这应该做你需要的：const imageToResize = document.getElementById('mtFuji');const resizeImage = () => { imageToResize.setAttribute( 'style', `width:${document.getElementById('width').value}; height:${document.getElementById('height').value};` );};这是通过从 DOM 中选择图像来实现的，当函数运行时，将高度和宽度的值设置为输入中的值。
随时随地看视频慕课网APP
相关分类
JavaScript