第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

您好,是否可以從表單輸入中獲取用戶輸入的高度和寬度,并以厘米為單位調(diào)整圖片大小作為輸出?

您好,是否可以從表單輸入中獲取用戶輸入的高度和寬度,并以厘米為單位調(diào)整圖片大小作為輸出?

瀟湘沐 2023-04-01 17:28:50
我正在嘗試制作一個(gè)頁面,該頁面從用戶輸入中獲取寬度和高度,并在單擊提交表單后調(diào)整 mtFuji 圖片的大小,請(qǐng)幫助我,因?yàn)槲冶仨毻瓿蛇@項(xiàng)任務(wù),非常感謝!<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貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超9個(gè)贊

嘗試這個(gè)。

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>



查看完整回答
反對(duì) 回復(fù) 2023-04-01
?
慕桂英4014372

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超13個(gè)贊

這應(yīng)該做你需要的:


const imageToResize = document.getElementById('mtFuji');

const resizeImage = () => {

  imageToResize.setAttribute(

    'style',

    `width:${document.getElementById('width').value}; 

     height:${document.getElementById('height').value};`

  );

};

這是通過從 DOM 中選擇圖像來實(shí)現(xiàn)的,當(dāng)函數(shù)運(yùn)行時(shí),將高度和寬度的值設(shè)置為輸入中的值。


查看完整回答
反對(duì) 回復(fù) 2023-04-01
  • 2 回答
  • 0 關(guān)注
  • 152 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)