Change font and image size without changing original CSS

Question!

How can I scale the size of all the text and images on a webpage by some amount when I can't make changes to the CSS of the website, only additions?

I want to scale text by 200% and all img-elements by 150%. I can execute JavaScript and add new CSS with it, but I can't change the content that the webserver gives me. The JavaScript should be short, so I can't replace all the original CSS with my own and in any case this should work with multiple sites.

The browser that I have doesn't include this kind of zoom feature. Which JavaScript snippet would accomplish this?

Edit:

jQuery seems like the way to go, the remaining problem is adjusting CSS for all text nodes without cumulatively scaling inner text nodes. Here's the JavaScript that I have now in a bookmerklet:

javascript:
(function(){
  var d=document;
  var h=d.getElementsByTagName("head")[0];
  var b=d.getElementsByTagName("body")[0];
  var s=d.createElement("style");
  s.appendChild(document.createTextNode('@media screen and (orientation: landscape) {\n'+'@-ms-viewport {\n'+'width: 800px;\n'+'}\n'+'}\n'+'@media screen and (orientation: portrait) {\n'+'@-ms-viewport {\n'+'width: 1000px;\n'+'}\n'+'}\n'+'html {\n'+'-ms-text-size-adjust:none;\n'+'}'));
  h.appendChild(s);
  var j=d.createElement("script");
  j.type='text/javascript';
  j.src='http://code.jquery.com/jquery-2.0.0.js';
  b.appendChild(j);
eval('$("*").each(function(){'+
'if($(this).text()!=""){'+
'fontSize=parseInt($(this).css("font-size"))*2;'+
'$(this).css("font-size",fontSize);'+
'}'+
'});');
eval('$("img").each(function(){'+
'imageWidth=this.width*2.5;'+
'$(this).css("width",imageWidth);'+
'});');`enter code here`
}
)()

I'm using Bookmarklet Builder to develop the solution: http://subsimple.com/bookmarklets/jsbuilder.htm



Answers

If you can add new CSS, then define there class f.e. "big". Define .big p, .big div, .big img etc. as you need. Than you can via javascript add this class to body element.

Look at this example I wrote:



Bit late, but you could use jQuery:

$('#scaled *').each(function(){
  if ($(this).text() != '') 
      fontSize = parseInt($(this).css("font-size")) * 2 //incease by 100%;
      $(this).css('font-size',fontSize);
});

$('#scaled img').each(function(){ 
    imageWidth = this.width * 2.5; //incease by 150%
    $(this).css('width',imageWidth);
})

I've illustrated my answer in a fiddle - http://jsfiddle.net/kA6fm/2/



This video can help you solving your question :)
By: admin