您好，是否可以从表单输入中获取高度和宽度的用户输入，并以厘米为单位调整图片大小作为输出？
您好，是否可以从表单输入中获取高度和宽度的用户输入，并以厘米为单位调整图片大小作为输出？
提问于 2020-09-28 06:12:04
我正在尝试做一个页面，从用户输入的宽度和高度，并在点击提交表单后调整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
Stack Overflow用户
回答已采纳
发布于 2020-09-28 06:57:16
尝尝这个。一定要考虑在W3Schoools上查看JS教程，在你的空闲时间，它是非常棒的！
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>
Stack Overflow用户
发布于 2020-09-28 06:44:53
这应该能满足您的需求：
const imageToResize = document.getElementById('mtFuji');
const resizeImage = () => {
imageToResize.setAttribute(
'style',
`width:${document.getElementById('width').value};
height:${document.getElementById('height').value};`
);
};这是通过从DOM中选择图像来实现的，当函数运行时，将高度和宽度的值设置为输入中的值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64093787
复制相关文章
相似问题
腾讯云开发者
