使用 JavaScript 向 HTML 添加数据、类和样式

Adding data, class and style to HTML with JavaScript

本文关键字：样式 数据 添加 JavaScript HTML 使用      更新时间：2023-09-26

我已经在这个练习中挣扎了一段时间（在我的HTML代码下面）：

<div class="exercise ex5">
    <h1>Zadanie 5</h1>
    <ul>
        <li data-direction="down"><a class="scroll"  href="#home">home</a></li>
        <li data-direction="down"><a class="scroll"  href="#about">about</a></li>
        <li><a class="scroll" href="#team">team</a></li>
        <li><a class="scroll" href="#service">service</a></li>
        <li><a class="scroll" href="#portfolio">portfolio</a></li>
        <li data-direction="down"><a class="scroll"  href="#blog">blog</a></li>
        <li><a class="scroll" href="#contact">contact</a></li>
    </ul>
</div>

我需要做的是：1.将值为"up"的数据方向添加到每个尚未具有的元素

var lol = document.querySelectorAll(".ex5 li");
    for (var i =0;i<lol.length;i++) {
        if (lol[i].hasAttribute === false) {
    lol[i].setAttribute("data-direction", "up");
        };
        lol[4].hasAttribute("data-direction");
        console.log(lol[i]);
    };

也许我应该使用 ：not... ？

2.将"大"类添加到列表的第五个元素

var lol = document.querySelectorAll(".ex5 li");
    for (var i =0;i<lol.length;i++) {
        lol:nth-child(5).classList.add("big");
        };

3.为我列表中的每个三个元素添加下划线。

var lol = document.querySelectorAll(".ex5 li");
    for (var i =0;i<lol.length;i++) {
        lol:nth-child(-3n+6).style.textDecorationLine="underline";
        };
这就是我到目前为止

一直在尝试做的事情......我的所有代码都没有运行，我刚开始编码，刚刚开始我的课程，一切都让我感到非常困惑......

1：

var lol = document.querySelectorAll(".ex5 li");
for (var i =0;i<lol.length;i++) {
    if (!lol[i].hasAttribute("data-direction")) {
        lol[i].setAttribute("data-direction", "up");
    }
};

阿拉伯数字：

var lol = document.querySelector(".ex5 li:nth-child(5)");
lol.classList.add("big");

3：

var lol = document.querySelectorAll(".ex5 li:nth-child(-3n+6)");
for (var i =0;i<lol.length;i++) {
    lol[i].style.textDecorationLine="underline";
}
相关文章：