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";
}}
谢谢!
编辑:
现在我再尝试一下,似乎一切都很正常。我想可能是某处有错别字。 感谢大家的回答,很抱歉浪费了你们的时间!