SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict buddybuddha's Avatar
    Join Date
    Dec 2005
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making Something Bold in IE

    Hi,
    I am working on a simple AJAX site with a simple tabbed system in which the tab you are currently in is indicated by boldface text.
    I have found many methods to set the text to boldface or not and the one I am currently using is:
    Code:
    document.getElementById('tab').style.setProperty("font-weight", "normal", "");
    or
    document.getElementById('tab').style.setProperty("font-weight", "bold", "");
    This works great in firefox, but messes up in IE.
    No other method I've tried works in IE. Does anyone know of some way to do thiS?

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Does this work?

    Code:
    document.getElementById('tab').style.fontWeight='bold';

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At certain font sizes bold will have no effect.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Setting class properties can be unreliable when it comes to cross-browser solutions.

    Set a class name instead and guarantee success.

    Code css:
    .bold {
    	font-weight: bold;
    }

    Code javascript:
    document.getElementById('tab').className="bold";
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you are going to set the class then you really ought to check if the field already has a class and if so add the new class to the existing ones. Otherwise you will remove whatever other classes are already set on that tag.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Typically that involves outsourcing the task of adding the class to another function.

    There is a good example over at http://www.openjs.com/scripts/dom/cl...nipulation.php

    Code javascript:
    function hasClass(ele,cls) {
    	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }
    function addClass(ele,cls) {
    	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
    }
    function removeClass(ele,cls) {
    	if (hasClass(ele,cls)) {
    		var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    		ele.className=ele.className.replace(reg,' ');
    	}
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •