Question

在我的if / else语句中，而不是：

todoTextWithCompletion = '(x) ' + todo.todoText;

我想在DOM中显示一个罢工字符串（todo.todoText input）。我尝试将其替换为

todoTextWithCompletion = todo.todoText.strike();

但是它在DOM中显示<strike>todo.todoText</strike>。

displayTodos: function () {
var todosUl = document.querySelector('ul');
todosUl.innerHTML = '';

todoList.todos.forEach(function (todo, position) {
  var todoLi = document.createElement('li');
  var todoTextWithCompletion = '';

  if (todo.completed === true) {
    todoTextWithCompletion = '(x) ' + todo.todoText;
  } else {
    todoTextWithCompletion = '( ) ' + todo.todoText;
  }

  todoLi.id = position;
  todoLi.textContent = todoTextWithCompletion;
  todoLi.appendChild(this.createToggleButton());
  todoLi.appendChild(this.createDeleteButton());
  todosUl.appendChild(todoLi);
}, this);
},

Answer 1

您还可以使用JavaScript为文本内容设置样式。

假设todoLi是您要删除的元素：

todoLi.style.textDecoration = "line-through";

使用新的CSS Typed Object Model，它将是：

todoLi.attributeStyleMap.set('text-decoration', 'line-through');

两者的效果都与使用CSS应用text-decoration: line-through;属性的效果相同。

还请记住， HTML5中不支持<strike>标签。

改为使用<del>或<s>。

Answer 2

您正在将textContent设置为HTML字符串。 textContent未解析为HTML，而是以纯文本形式添加的：

innerHTML的差异

Element.innerHTML如其名称所示返回HTML。有时候人   使用innerHTML检索或写入元素内的文本。 textContent   具有更好的性能，因为其值未解析为HTML。   而且，使用textContent可以防止XSS攻击。

相反，您应该使用<strike>来构造document.createElement("strike");节点，使用innerHTML，或者按照建议的方式，添加text-decoration: line-through CSS样式。

document.getElementById("text-content").textContent = "<strike>foo</strike>"
document.getElementById("inner-html").innerHTML = "<strike>foo</strike>"

<div id="text-content"></div>
<div id="inner-html"></div>

Answer 3

您可以使用position: fixed; top: 0;添加类，而不是向元素添加原始样式：

CSS

classList API

JavaScript

.item-completed {
text-decoration: line-through;
}

通过JavaScript敲字符串

3 个答案: