我正在尝试制作一个页面，该页面从用户输入中获取宽度和高度，并在单击提交表单后调整 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 回答
天涯尽头无女友
TA贡献1831条经验 获得超9个赞
尝试这个。
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
TA贡献1871条经验 获得超13个赞
这应该做你需要的：
const imageToResize = document.getElementById('mtFuji');
const resizeImage = () => {
imageToResize.setAttribute(
'style',
`width:${document.getElementById('width').value};
height:${document.getElementById('height').value};`
);
};
这是通过从 DOM 中选择图像来实现的，当函数运行时，将高度和宽度的值设置为输入中的值。
添加回答
举报
0/150
提交
取消