How to change font-weight of a text using JavaScript

Question

I have a button that looks like this:

HTML:

<button type="button" id="top_skin" onclick="theme()">Theme: <span id="dark">Dark</span>/<span id="light">Light</span></button>

CSS:

#top_skin{display:inline;
float:right;
margin:5px 15px 5px 5px;
padding: 0px 5px 0px 5px;
height:20px;
min-width:140px;
background:grey;
cursor:pointer;
border-radius:5px;
overflow:hidden;
}

#dark{font-weight:bold;}

I want JavaScript to switch the font-weight of the words "Dark" and "Light" so that when I click the button the word "Light" gets bold and "Dark" gets normal. And when I click again I want "Dark" to be bold and "Light" to be normal. But I can't make it work. The funny thing is that I can create a function that do the same thing, but with color in stead of font-weight.

The code that works but changes color instead of font-weight:

function theme(){
var dark = document.getElementById('dark');
var light = document.getElementById('light');

if(light.style.color !== "red"){
    light.style.color="red";
    dark.style.color="black";
}else{
    dark.style.color="red";
    light.style.color="black";
}}

The code that I thought would do the same thing, but with font-weight:

function theme(){
var dark = document.getElementById('dark');
var light = document.getElementById('light');

if(light.style.fontWeight !== "bold"){
    light.style.fontWeight="bold";
    dark.style.fontWeight="normal";
}else{
    dark.style.fontWeight="bold";
    light.style.fontWeight="normal";
}}

Thank you!

Edit:

Now this time when I try it it seems to work just fine for me too. I suppose there have been a typo somewhere. Thank you all for your answers, and I am sorry I took your time!

I expect if you walk through with a debugger, you can figure it out. In 2012, there's really no excuse for not using a debugger to debug your client-side code. :-) — T.J. Crowder
– T.J. Crowder, Commented Feb 19, 2012 at 16:10
Works for me in Firefox, Chrome, IE7, even IE6 (!): jsbin.com/eyabor — T.J. Crowder
– T.J. Crowder, Commented Feb 19, 2012 at 16:15

T.J. Crowder · Accepted Answer · 2012-02-19 16:32:11Z

It works for me on Chrome, Firefox, and IE6-9 (well, I didn't try 8). On Opera, though, fontWeight comes back as 700 rather than bold (which isn't completely unreasonable). So if you're running into trouble on Opera, that may be why.

So you may need to maintain a flag separate from the element's style.fontWeight property. One way is like this:

Live copy | Live copy source

(function() {
  var lightBold = false;

  // Export just the theme function out of the scoping function
  window.theme = theme;

  function theme(){
    var dark = document.getElementById('dark');
    var light = document.getElementById('light');

    lightBold = !lightBold;
    if(lightBold){
        light.style.fontWeight="bold";
        dark.style.fontWeight="normal";
    }else{
        dark.style.fontWeight="bold";
        light.style.fontWeight="normal";
    }
  }

})();

...but of course there are lots of options (a data-* attribute, etc.).

clem · Accepted Answer · 2012-02-19 16:17:10Z

1

why don't you create 2 classes one with normal font, one with bold font and you assign/remove these depending on which class is assigned to an element? jQuery's hasClass() and addClass() and removeClass() are of great help here

answered Feb 19, 2012 at 16:17

clem

3,3661 gold badge24 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to change font-weight of a text using JavaScript

Edit:

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related