无法更改作为字符串传递的 DOM 元素样式

Question

我在此处将 DOM 元素作为字符串传递。

function showNotes() {
    let notes = localStorage.getItem("notes");
    if (notes != null) {
        notesObj = JSON.parse(notes);
    } else {
        notesObj = [];
    }
    let html = "";
    notesObj.forEach(function(element, index) {
        html += `<div class="noteCard card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Title: ${element.title}</h5>
          
          <p class="card-text">${element.text}</p>
          <a href="#" id="${index}"onclick="deleteNotes(this.id)" class="card-link" >Delete Note</a>
          <a href="#" id="${index}"onclick="markNotes(this.id)"class="card-link">Important</a>
        </div>
      </div>`;

    });

我想给卡片一个样式。当用户单击 link“重要”（如 DOM 中所述）时，应更改相应的卡片颜色。所以我正在尝试访问“noteCard”class。这是我的 markNotes() 函数

function markNotes(index) {
    let notes = localStorage.getItem("notes");
    if (notes != null) {
        notesObj = JSON.parse(notes);
    } else {
        notesObj = [];
    }
    noteStyl = document.querySelectorAll('.noteCard')[0];
    noteStyl.style.color = "red";
    console.log("Color should be applied")
    localStorage.setItem("notes", JSON.stringify(notesObj));
    showNotes();
}

我也尝试了以下方法，但没有任何效果。

noteStyl = document.getElementsByClassName('noteCard')[0]
noteStyl = document.querySelector('.noteCard')[0];

使用此代码，当我单击 link“重要”时，除了打印“应应用颜色”之外，没有任何变化。所以一定是访问DOM文件有问题。我真的陷入其中。提前致谢

Answer 1

访问 DOM 没有任何问题。我认为您正在尝试访问不在页面上的元素。

您是否在 showNotes 函数末尾的页面上显示 html？您可以通过以下方式进行：someDiv.innerHTML = html.

更新

访问特定的卡（不一定是第一张）也许你可以为每张卡设置一个 id 及其索引示例：card-${index}，然后使用 .getElementById[=21= 访问它]

更新 #2

您正在将 notesObj 存储为数组，并且在循环中（在 showNotes 中）您正在创建静态样式。所以你需要更新 notesObj

中的对象样式

所以不是设置样式，而是创建一个样式对象：

function markNotes(index) {
    let notes = localStorage.getItem("notes");
    if (notes != null) {
        notesObj = JSON.parse(notes);
    } else {
        notesObj = [];
    }
    if(!notesObj[index].styles) notesObj[index].styles = {};
    notesObj[index].styles.color = "red";
    localStorage.setItem("notes", JSON.stringify(notesObj));
    showNotes();
}

然后在showNotes中应用它：

notesObj.forEach(function(element, index) {
        style = "";
        if(element.styles) {
            console.log(element.styles);
            for (let key in element.styles) {
                style += `${key}: ${element.styles[key]}`;
            }
        }
        console.log(style);
        html += `<div class="noteCard card" style="width: 18rem; ${style}">
        <div class="card-body">
          <h5 class="card-title">Title: ${element.title}</h5>
          
          <p class="card-text">${element.text}</p>
          <a href="#" id="${index}"onclick="deleteNotes(this.id)" class="card-link" >Delete Note</a>
          <a href="#" id="${index}"onclick="markNotes(this.id)"class="card-link">Important</a>
        </div>
      </div>`;

    });

Answer 2

查看下面的代码和我添加的评论我评论了你的 localStorage 代码并添加了我的演示代码。

function showNotes() {
  let notes = [{
      title: 'title1',
      text: 'text1'
    },
    {
      title: 'title2',
      text: 'text2'
    },
    {
      title: 'title3',
      text: 'text3'
    }
  ];

  notesObj = notes;
  /* if (notes != null) {
      notesObj = JSON.parse(notes);
  } else {
      notesObj = [];
  } */
  let html = "";
  notesObj.forEach(function(element, index) {
    html += `<div class="noteCard card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Title: ${element.title}</h5>
          
          <p class="card-text">${element.text}</p>
          <a href="#" id="${index}"onclick="deleteNotes(this.id)" class="card-link" >Delete Note</a>
          <a href="#" id="${index}"onclick="markNotes(this.id)"class="card-link">Important</a>
        </div>
      </div>`;

  });
  document.getElementById("html").innerHTML = html; // to insert data into HTML

}

showNotes() // calling function first time

function markNotes(index) {
  console.log('index', index)
  /*let notes = localStorage.getItem("notes");
  if (notes != null) {
    notesObj = JSON.parse(notes);
  } else {
    notesObj = [];
  }*/
  noteStyl = document.querySelectorAll('.noteCard')[index];
  noteStyl.style.color = "red";
  console.log("Color should be applied")
  localStorage.setItem("notes", JSON.stringify(notesObj));
  //showNotes(); // See I have commented this code
}

<div id="html">

</div>

无法更改作为字符串传递的 DOM 元素样式

Unable to change DOM element style that is pass as a string

javascript

dom

styles

getelementsbyclassname

bootstrap-4

更新

更新 #2