Back To Programming / Scripting / Coding Forum

How to override the <font> tag with JS?

  • dyefade
  • Expert
  • Expert
  • User avatar
  • Joined: May 22, 2004
  • Posts: 718
  • Loc: UK
  • Status: Offline

Post February 22nd, 2007, 2:46 am

Hi,

I'm building a function in javascript to dynamically resize text on a page - easy enough with the [element].style.fontSize property. However, if the page has made use of the <font size="n"> property to override the styles, the function isn't going to work.

Has anyone found a way of overcoming this?

thanks!

P.S. "It's impossible" is an acceptable answer - I'll just have to go back to the client and explain that if they don't stick to the CSS scheme they've settled on, this functionality cannot be implemented. I would like a solution though. B.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 22nd, 2007, 2:46 am

  • joebert
  • Great Cornholio
  • Genius
  • User avatar
  • Joined: Feb 10, 2004
  • Posts: 12306
  • Loc: Clearwater, FL
  • Status: Offline

Post February 22nd, 2007, 1:19 pm

Code: [ Download ] [ Select ]
<html>
<head>
<title>Remove size attributes</title>
<script type="text/javascript">function dump(obj){var _ = [];for(prop in obj ){_.push(prop);};_.sort();alert(_.join(' ||| '));}</script>
<script type="text/javascript">
function doit(){
    // Get the (note depreciated) FONT elements
    var fonts = document.getElementsByTagName('font');
    
    // Loop through them
    for(var i=0; i<fonts.length; i++){
        // Moz / Opera
        // We don't check for removeNamedItem explicitly
        // because for some strange reason IE7 acts like the method exists
        // but doesn't provide the functionality or return reference to it in a "for prop in" loop.
        // Opera supports both methods of monitoring events,
        // Opera also makes the text smaller than it should be if we use the same method IE uses
        // so we check for the Moz method of monitoring events
        // which is known not to work in IE
        if( fonts.item(i).addEventListener )
        {
            fonts.item(i).attributes.removeNamedItem('size');
        }
        // This is how IE7 does it
        else
        {
            fonts.item(i).size = null;
        }
    }
}
</script>
</head>
<body>
    It's size <font size="20">20</font> (twenty)<br><br>
    <button onclick="doit()">Do It</button>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Remove size attributes</title>
  4. <script type="text/javascript">function dump(obj){var _ = [];for(prop in obj ){_.push(prop);};_.sort();alert(_.join(' ||| '));}</script>
  5. <script type="text/javascript">
  6. function doit(){
  7.     // Get the (note depreciated) FONT elements
  8.     var fonts = document.getElementsByTagName('font');
  9.     
  10.     // Loop through them
  11.     for(var i=0; i<fonts.length; i++){
  12.         // Moz / Opera
  13.         // We don't check for removeNamedItem explicitly
  14.         // because for some strange reason IE7 acts like the method exists
  15.         // but doesn't provide the functionality or return reference to it in a "for prop in" loop.
  16.         // Opera supports both methods of monitoring events,
  17.         // Opera also makes the text smaller than it should be if we use the same method IE uses
  18.         // so we check for the Moz method of monitoring events
  19.         // which is known not to work in IE
  20.         if( fonts.item(i).addEventListener )
  21.         {
  22.             fonts.item(i).attributes.removeNamedItem('size');
  23.         }
  24.         // This is how IE7 does it
  25.         else
  26.         {
  27.             fonts.item(i).size = null;
  28.         }
  29.     }
  30. }
  31. </script>
  32. </head>
  33. <body>
  34.     It's size <font size="20">20</font> (twenty)<br><br>
  35.     <button onclick="doit()">Do It</button>
  36. </body>
  37. </html>
Everyone's born rich, some people just never realize it.

Page 1 of 1

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 204 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© Unmelted Enterprises 1998-2009. Driven by phpBB © 2001-2009 phpBB Group.