Javascript change width of image onclick
Question
I'm a complete noob when it comes to javascript. Would there be anyway to change an image after it is clicked, some way to trigger a js function to change the css. It would have to be triggered by an event and something other than onclick, onfocus probably.
<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>
5 answers
solution1
1 2014-04-01 22:29:39
try this...
function mouseOver() {
document.getElementById('image').style.height = "400px";
}
solution2
0 2014-04-01 22:26:24
First i edited the question , because the function was not defined correctly .
Second :
to access the height property of any element , you should use style.height , and should add "px" to the value.
please spend more time searching for answers , instead of posting a new question.
solution3
0 2014-04-01 22:29:40
Change the JS to this:
var image = document.getElementById('image');
function mouseOver() {
image.style.height="600px";
}
image.onclick = mouseOver;
solution4
0 2014-04-01 22:31:54
Setting values you can use directly style attribute, but remember that asking for them is a greater problem:
Please refer to this one: Get a CSS value with JavaScript
solution5
0 2015-03-01 01:14:20
This should work
<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'
/>
just copy and edit the image tag code as needed
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.