javascript - 如何使用 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>
我究竟做错了什么?
解决方案
您必须使用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>
推荐阅读
- android - httpClient.get 在模拟器上可以,但在安卓设备上不行
- mysql - CAP Theorm - 为什么 Mysql 是 CA
- javascript - 如何使用 Cesium 中的可用性间隔定义多边形实体?
- image - Instagram 图像未显示在我网站的 IG 提要中,显示带有 400 响应的损坏图像
- python-3.x - 当键不是常量时,将 List[Dict] 写入 CSV 时获取标题的 Pythonic 方法
- sql - 从日期到日期的总和
- javascript - html 无法获取地址正确的照片返回 404
- arrays - 数组返回不正确的值?
- javascript - 使用或不使用 Double Bang 检查是否存在 - if (obj.string) vs if (!!obj.string)?
- wordpress - 即使将宽度设置为 800 像素,WordPress 也会自动将“300x200”添加到媒体文件 URL