javascript - JavaScript zoom

Question

I'm tying to achieve zoom effect which you can see here: http://x3dom.org/x3dom/example/x3dom_x3dElementCSSIntegration.html.

So, I have a simple element (it doesn't matter that this is x3d example, really), which I want to enlarge to full screen size with a click of a button, and then reduce back to it's original size after clicking the button again. I would very much appreciate any help I can get with coding this in JavaScript. I have viewed the page source on this example and tried to get it to work in my project, but I'm very bad with JavaScript and I can't seem to get it to work.

Also, I tried searching with Google, but all the examples I found are far fancier in comparison with what I need.

Answer 1

Something similar to the following should work.

HTML:

<div id="zoomable" class="resizable">
content
</div>

CSS:

.resizable {
position: relative;
}
.resizable.zoomed {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}

JavaScript:

document.getElementById('zoomable').className = "resizable zoomed";