Question

我有一个看起来像这样的按钮：

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能够切换单词的字体权重＆＃34; Dark＆＃34;和＆＃34; Light＆＃34;所以，当我点击按钮时，单词＆＃34; Light＆＃34;变得大胆而且＃34;黑暗＆＃34;变得正常了。当我再次点击时，我想要＆＃34; Dark＆＃34;要大胆一点＆＃34; Light＆＃34;是正常的。但我无法使其发挥作用。有趣的是，我可以创建一个功能相同的功能，但颜色代替字体重量。

有效的代码但改变颜色而不是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";
}}

我认为代码会做同样的事情，但使用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";
}}

谢谢！

编辑：

现在这次我尝试它似乎也适合我。我想某处有一个错字。谢谢大家的回答，我很抱歉，我花了很多时间！

Answer 1

Chrome，Firefox和IE6-9上的works for me（好吧，我没试过8）。但是，在Opera上，fontWeight返回700而不是bold（这并非完全不合理）。所以如果你在Opera上遇到麻烦，那可能就是原因。

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

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

})();

...但当然有很多选项（a data-* attribute等）。

Answer 2

为什么不用普通字体创建2个类，用粗体字创建一个类，根据分配给元素的类分配/删除这些类？ jQuery的hasClass()和addClass()以及removeClass()在这里有很大的帮助

如何使用JavaScript更改文本的字体粗细

编辑：

2 个答案: