Question

我正在尝试使用Javascript对此HTML文件中“ eventsList” ID中的li元素设置样式。我一直在玩代码，无论出于何种原因，样式都无法正常工作。我觉得这一定是一个超级简单的解决方案，但是作为一个新手，我无法弄清楚。如果可以的话，前四个项目符号点应使用黑体和橙色字体设置。

function findElements() {
  var events = getElementById('eventsList');
  var linkItems = events.getElementsByTagName('li');
  
  for (var i = 0; i < linkItems.length; ++i) {
    linkItems[i].style.color = 'orange';
    linkItems[i].style.fontWeight = 'bold';
  }
}

window.onload = findElements;

<h2>Subheading</h2>
<ul id="eventsList">
  <li>List 1</li>
  <li>List 2</li>
  <li><a href="www.google.com">Linked list Item</a></li>
  <li>List 4</li>
</ul>

我在做什么错？

Answer 1

您必须使用document.getElementById：

function findElements() {
  var events = document.getElementById('eventsList');
  var linkItems = events.getElementsByTagName('li');
  for (var i=0; i< linkItems.length;++i) {
    linkItems[i].style.color="orange";
    linkItems[i].style.fontWeight="bold";
  }
}
window.onload = findElements;

  <ul id="eventsList">
    <li>List 1</li>
    <li>List 2</li>
    <li><a href="www.google.com">Linked list Item</a></li>
    <li>List 4</li>
  </ul>

Answer 2

您有一个小问题。 getElementById本身并不存在。它是document的属性。更正后的行如下所示：

var events = document.getElementById('eventsList');

对于将来的问题，这是您自己发现问题的方法。打开开发人员工具（在许多浏览器中为F12），然后在控制台中查看。您会看到一条错误消息，指出未定义getElementById。这提醒您确保您在正确的对象上引用正确的方法。

Answer 3

您真的很亲密！只是一些基本错误。您需要在底部执行该功能，并且需要从文档中获取eventsList。

function findElements() {
  var events = window.document.getElementById('eventsList');
  var linkItems = events.getElementsByTagName('li');
  for (var i=0; i< linkItems.length;++i) {
    linkItems[i].style.color="orange";
    linkItems[i].style.fontWeight="bold";
  }
}
window.onload = findElements();

如何使用Java脚本在ID中设置标签样式？

3 个答案: