Question

我正在尝试创建一个运行计时器的页面，并根据该计时器，文本项变为活动（粗体），之后它会得到一个删除，我也试图让它恢复正常（不是粗体）），在这里我卡住了。

文本项目（每个项目都有自己的ID）：

<div id="itm1"> Item 1 text</div>

当项目处于活动状态时：

oldHTML = document.getElementById("itm1").innerHTML;
newHTML = "<span style='font-weight:bold;'>" + oldHTML + "</span>";
document.getElementById("itm1").innerHTML = newHTML;

上述作品和文字变为粗体。

后来，我尝试彻底打击和解开

    oldHTML = document.getElementById("itm1").innerHTML;
    newHTML = '<span style="text-decoration:line-through; font-weight:normal;">' + oldHTML + "</span>";
    document.getElementById("itm1").innerHTML = newHTML;

在此之后，我会罢工，但大胆的效果仍然存在。

我做错了什么？如何删除粗体效果？

Answer 1

这里正确的解决方案是使用css类来设置元素的样式

function makebold() {
  document.getElementById("itm1").classList.add('bold');
}

function linethrough() {
  document.getElementById("itm1").classList.add('linethrough');
  document.getElementById("itm1").classList.remove('bold');
}

.bold {
  font-weight: bold;
}
.linethrough {
  text-decoration: line-through;
}

<div id="itm1">Item 1 text</div>
<button onclick="makebold()">Bold</button>
<button onclick="linethrough()">Line Through</button>

如果您看到内部跨度具有覆盖外部样式的粗体属性，则您的脚本会创建以下html

<div id="itm1">
  <span style="text-decoration:line-through; font-weight:normal;">
    <span style="font-weight:bold;"> Item 1 text</span>
  </span>
</div>

Answer 2

正如deceze评论中提到的那样，你不能替换span，而是将其包裹在新的范围内。所以你的HTML看起来像这样：

<div id="itm1"><span style="text-decoration:line-through; font-weight:normal;"><span style='font-weight:bold;'> Item 1 text</span></span></div>

所以，我认为你可以将旧的div内容添加到类似于

的新内容中。

var span=document.getElementById("itm1").querySelectorAll("span")[0];
span.style.fontWeight="normal";
span.style.textDecoration="line-through";

Answer 3

运行javascript时，HTML会发生这种情况 -

初始代码 -

<div id="itm1"> Item 1 text</div>

第一次运行代码后 -

<div id="itm1"><span style='font-weight:bold;'> Item 1 text</span></div>

这会使您的第1项文字加粗。

现在，当您的代码再次运行时，它会将HTML更改为此 -

<div id="itm1">
    <span style="text-decoration:line-through; font-weight:normal;">
        <span style='font-weight:bold;'> 
           Item 1 text
        </span>
    </span>
</div>

现在在这部分中，由于内部跨度， font-weight：normal 会被 font-weight：bold 覆盖。这就是为什么你用大胆的字体权重来抚摸文字。

此外，这不是正确的方法。您应该在另一个答案中使用Arun建议的方法，或者如果您已经在代码中使用了jQuery，则使用jQuery .toggleClass。

使用Javascript的非粗体文本不起作用

3 个答案: