已解決430363個問題，去搜搜看，總會有你想問的

您好，是否可以從表單輸入中獲取用戶輸入的高度和寬度，并以厘米為單位調整圖片大小作為輸出？

首頁猿問您好，是否可以從表單輸入中獲取用戶...

您好，是否可以從表單輸入中獲取用戶輸入的高度和寬度，并以厘米為單位調整圖片大小作為輸出？

JavaScript

瀟湘沐 2023-04-01 17:28:50

我正在嘗試制作一個頁面，該頁面從用戶輸入中獲取寬度和高度，并在單擊提交表單后調整 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>

反對回復 2023-04-01

慕桂英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 中選擇圖像來實現的，當函數運行時，將高度和寬度的值設置為輸入中的值。

反對回復 2023-04-01

2 回答
0 關注
157 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

您好，是否可以從表單輸入中獲取用戶輸入的高度和寬度，并以厘米為單位調整圖片大小作為輸出？

您好，是否可以從表單輸入中獲取用戶輸入的高度和寬度，并以厘米為單位調整圖片大小作為輸出？

2 回答

添加回答

您好，是否可以從表單輸入中獲取用戶輸入的高度和寬度，并以厘米為單位調整圖片大小作為輸出？

您好，是否可以從表單輸入中獲取用戶輸入的高度和寬度，并以厘米為單位調整圖片大小作為輸出？