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

【问题标题】：Adding data, class and style to HTML with JavaScript使用 JavaScript 向 HTML 添加数据、类和样式
【发布时间】：2016-06-12 06:44:05
【问题描述】：

我一直在为这个练习苦苦挣扎（在我的 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.将值“向上”的数据方向添加到每个元素，但还没有它

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";
        };

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

【问题讨论】：

标签： javascript html database methods

【解决方案1】：

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");
    }
};

2：

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";
}

【讨论】：