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>

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è)置為輸入中的值。
添加回答
舉報(bào)