Question

为什么id.setAttribute不在这里工作？我只是想在点击时改变文本的颜色。 https://jsfiddle.net/9fauq8qs/

function priority() {
    var id = this.getAttribute('id');
    var todos = get_todos();
    id.setAttribute("style", "color:red");

    localStorage.setItem('todo', JSON.stringify(todos));

    show();

    return false;
}

Answer 1

函数priority()内的函数this是button元素。要改变p的文本颜色（假设用户输入文本的意思是什么？else remove parentNode），你需要通过this.parentNode的父版本（假设你的html结构保持不变）。

同样当你调用show()时，它会用id项替换元素的innerHTML，从而删除颜色更新。你可能想要改变它。（我在小提琴中移除它以使其工作）

以下更新的功能：

function priority() {
    var todos = get_todos();
    this.parentNode.setAttribute("style", "color: red");
    localStorage.setItem('todo', JSON.stringify(todos));
    return false;
}

小提琴：https://jsfiddle.net/9fauq8qs/26/

Answer 2

您尝试在setAttribute变量上调用id，而不是在该元素上调用。

假设（你给出了很少的上下文:)，this是一个Element对象：

this.setAttribute('style', 'color: red')

Answer 3

priority()和show()函数存在问题。以下内容可以让您更接近您想要做的事情。

function priority() {
  var id = this.getAttribute('value');
  var todos = get_todos();

  localStorage.setItem('todo', JSON.stringify(todos));
  document.getElementById(id).style.color = "red";

  return false;
}

function show() {
  var todos = get_todos();

  var html = '<p>';
  for (var i = 0; i < todos.length; i++) {
    html += "<p id='item" + i + "'>" + todos[i] + "<button class='remove'>x</button></li><button class='priority' value='item" + i + "'>Priority</button></li>";
  };

请参阅：https://jsfiddle.net/he7nakL2/

如何更改用户输入文本的颜色？

3 个答案: