首页 > 解决方案 > 如何使用 Javascript 在 ID 中设置标签样式?

问题描述

我正在尝试使用 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>

我究竟做错了什么?

标签: javascripthtmlcss

解决方案


您必须使用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>


推荐阅读