当检测到一定的最小屏幕分辨率大小时，如何通过Javascript更改CSS属性

Question

I have this code:

function AUTADIV () {
  var BRW = window.outerWidth;
  x = (BRW/1280) * 20
  document.getElementsByTagName("a").style.fontSize = x
}

and the tag <a> is already under this class in a .css file:

a { 
   position:relative;
   z-index:1; 
   color:White; 
   background-color: transparent;
   font-size:20pt;
   text-decoration: none;
   text-shadow: blue 0em 0em 0.4em 
}

When someone with a larger screen sees my site, the background does fill it all, but the font is too small. Is there any way to make it automatically resize? If not, how can I change font-size:20pt by JavaScript? My code only works if the font-size style is inline, and I need it in the CSS script.

I have found that the code I need activates with the onResize event.

Answer 1

If it needs to be in the CSS then it might be difficult to do. If however, it's able to be changed dynamically with JS then you can accomplish this with a simple test like:

(I'm using jquery)

$.getDocHeight = function(){
    return Math.max(
        $(document).width(),
        $(window).width(),
        /* For opera: */
        document.documentElement.clientWidth
    );
};
if($.getDocHeight>threshhold){ // some threshhold of a max width
    $('a').style('font-size','40pt');
}

This can be done in regular js as well. It's hard to determine the width on all different browsers, thats why I included the function. But once you have the width, you just need to do a simple check and you can bump up the font-size style for your anchor tags. I suggest having static sizes so that the font is more predictable and doesn't scale with your page size.

This is a best practice when considering different types of users (like mobile users where you definitely do not want the font to be so small that all of it fits on one page).

Src for code: http://james.padolsey.com/javascript/get-document-height-cross-browser/

Answer 2

You may modify the rules by accessing the CSSRule-Object.

Details:

IE<9 : http://help.dottoro.com/ljcufoej.php
Others: http://help.dottoro.com/ljdxvksd.php

Answer 3

You might get better results using a media query:

@media all and (max-width: 1280px) {
    a{font-size:12pt;}
}

You can repeat this for increasingly smaller sizes. It won't smoothly transition, but it doesn't require JavaScript (and besides so much changes when you resize a window that a jump in text size probably won't be noticed).