Question

当涉及到javascript时，我是一个完整的菜鸟。无论如何都会在单击后更改图像，某种方式可以触发js函数来更改css。它必须由一个事件触发，而不是onclick，onfocus可能。

<style>
    #pic {
    width:100px;
    height:100px;
    }
</style>
</head>
<body>

<img src='nope.jpg' id='pic' onclick="mouseOver()"></img>

<script type='text/javascript'>
    function mouseOver() {
    document.getElementById('pic').style.width="400px";
    document.getElementById('pic').style.height="400px";
    }       
</script>

Answer 1

首先我编辑了这个问题，因为函数没有正确定义。

第二：

要访问任何元素的height属性，您应该使用style.height，并且应该添加＆＃34; px＆＃34;价值。

请花更多时间搜索答案，而不是发布新问题。

Answer 2

试试这个......

function mouseOver() {
   document.getElementById('image').style.height = "400px";
}

Answer 3

将JS更改为：

var image =  document.getElementById('image');

function mouseOver() {
    image.style.height="600px";
}

image.onclick = mouseOver;

Answer 4

设置值可以直接使用样式属性，但请记住，询问它们是一个更大的问题：

请参考这个： Get a CSS value with JavaScript

Answer 5

这应该有效

<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>   
<img
       width="100"
       onmouseOver="this.width=400; this.height=400"
       onclick="this.width=100"
       alt="RESIZE IMAGE"
       id='pic'
       src='nope.jpg'
    />

只需根据需要复制和编辑图片代码

Javascript更改图像的宽度onclick

5 个答案: