如何使用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;}

我希望 JavaScript 能够切换“Dark”和“Light”这两个单词的字体粗细，这样当我点击按钮时，“Light”这个单词就会变成粗体，“Dark”则变回正常字体。再次点击时，“Dark”将变成粗体，“Light”变回正常字体。但是我无法让它起作用。有趣的是，我可以创建一个函数，实现同样的效果，但是改变的是颜色而不是字体粗细。

下面是能够改变颜色但无法改变字体粗细的代码：

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";
}}

我原以为以下代码可以达到同样的效果，但使用了 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";
}}

谢谢！

编辑：

现在我再尝试一下，似乎一切都很正常。我想可能是某处有错别字。 感谢大家的回答，很抱歉浪费了你们的时间！

- lindhe

---

如果你使用调试器来逐步跟踪代码，相信你能找出问题所在。在2012年，不使用调试器来调试客户端代码，这是无可推卸的责任。 :-) - T.J. Crowder

在Firefox，Chrome，IE7甚至IE6（！）中对我有效：http://jsbin.com/eyabor - T.J. Crowder

Answer 1

这段代码在Chrome、Firefox和IE6-9上可以正常工作（我没有尝试过8）。但是在Opera上，fontWeight返回的是700而不是bold（这并不完全不合理）。所以如果在Opera上遇到问题，可能就是这个原因。

因此，您可能需要维护一个与元素的style.fontWeight属性分开的标志。一种方法是像这样：

现场演示 | 现场演示源代码

(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";
    }
  }

})();

......但是当然还有很多选项（例如data-*属性等）。

- T.J. Crowder

Answer 2

为什么不创建两个类，一个使用普通字体，一个使用粗体，并根据分配给元素的类别进行分配/删除？ 在这里，jQuery的 hasClass() 和 addClass() 以及 removeClass() 非常有帮助。

- clem