gpt4 book ai didi

javascript - 使用 Javascript 更改图像宽度/高度

转载 作者:行者123 更新时间:2023-11-28 16:34:14 25 4
gpt4 key购买 nike

这里是 Javascript 的新手,每当发生鼠标悬停时,我一直在尝试更改 HTML 页面中图像的大小(宽度/高度),但是如果在 CSS 页面中设置样式,它似乎不起作用,这是一个巨大的问题我,因为我需要使用 position 属性来设置图像位置。

这是代码。

HTML:

<a  href="#"  onMouseOver="big()" onMouseOut="small()">
<img src="img1.png" name="image1" id="mw">
</a>

CSS:

#mw
{
position:absolute;
left:15%;
top:35%;
width:146px;
height:97px;
}

jS:

function big()
{
document.getElementsByName("image1").style.width=183;
document.getElementsByName("image1").style.height=121;
}
function small()
{
document.getElementsByName("image1").style.width=146;
document.getElementsByName("image1").style.height=97;
}

最佳答案

简单的javascript版本,不需要样式

var element = document.getElementsByName("image1")[0];
element.setAttribute('width', 146);
element.setAttribute('height', 97);

function big() {
element.setAttribute('width', 183);
element.setAttribute('height', 121);
}

function small() {
element.setAttribute('width', 146);
element.setAttribute('height', 97);
}
<a href="#"  onMouseOver="big()" onMouseOut="small()">
<img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw">
</a>

关于javascript - 使用 Javascript 更改图像宽度/高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34838954/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com