0

I'm trying to change the value of the zoom property which I have in a external css file on the body selector. This zoom is set to 100% and is general for all HTML documents that has the css file linked in. What I want to do is: I have this a link in my HTML document.

<a onClick="zoom('80%')">80%</a>

The javascript function is this one: 

function zoom(zoom)
{
    $("a").click(function()
    {
        $('body').css('zoom','80%');
    }); 

}

What I want this to do is, by clicking the link, it will call the function and sending in 80% into the function. What I then want the function to do, is to go into my external css and replace 100% with 80%:

body                                                                        
{
    zoom: 100%;

}

I don't really know how to do this, so I'm asking you guys! This is a part of my final task for the webdesign course that I'm taking, so I would really want this to work!

mmohab
  • 2,303
  • 4
  • 27
  • 43
ProShifu
  • 1
  • Um, why? I mean, sure, it's possible using `styleSheets` collection and a lot of hacking around, but... why? – Niet the Dark Absol May 09 '14 at 16:23
  • What effect are you looking for from this? Do you want it to make the change permanent, or maybe affect all visitors? – kitcar2000 May 09 '14 at 16:24
  • The whole point of *cascading* style sheets is that you can override styles easily -- far more easily than going in and replacing what's in the stylesheet. – Blazemonger May 09 '14 at 16:38
  • possible duplicate of [How can I scale an entire web page with CSS?](http://stackoverflow.com/questions/1156278/how-can-i-scale-an-entire-web-page-with-css) – a coder May 10 '14 at 18:43
  • I'm not sure but, have you tried it on your line 5$('body').css('zoom', zoom); ??? – felipekm May 10 '14 at 18:49

1 Answers1

0

Are you asking to do this: How can I scale an entire web page with CSS?

That's done with javascript like this, but with the proper style taging:

document.getElementById('image').style.width = "80%";
document.getElementById('image').style.height = "80%";
Community
  • 1
  • 1
a coder
  • 546
  • 4
  • 23
  • I don't see how that will help me, since I don't want to change an ID. I want to go inside the my external CSS file and change the body seclector's property value to 80% when clicking on that link. The result of having the 80% will be that my website will hav decreased in zoom, helping people with low screen resolution to adjust the page to their needs. – ProShifu May 10 '14 at 10:31
  • You don't change an Id, you change the property of the ID. Is what you're asking how do you chance the stretch of the image to a smaller size? If so, you can do it directly from the style tag. You can also do everything in percentage, and the page will scale however you want it to. – a coder May 10 '14 at 17:52
  • No that's not the case. When I change the zoom in the selctor "body", the ENTIRE website will zoom out. That's what I want to achieve so that users with smaller screen size than 1080p will be able to see the entire site without having the need to to use the scrollbars in x/y direction – ProShifu May 10 '14 at 18:12
  • I think what you mean is how do you do key pressing of ctrl + "+". Here is the key pressing simulator I've found: http://stackoverflow.com/questions/596481/simulate-javascript-key-events – a coder May 10 '14 at 18:40