在Javascript中，当鼠标悬停/单击列表项时，如何在列表中选择特定的列表项并添加一个行通过属性_Javascript

在Javascript中，当鼠标悬停/单击列表项时，如何在列表中选择特定的列表项并添加一个行通过属性

javascript

在Javascript中，当鼠标悬停/单击列表项时，如何在列表中选择特定的列表项并添加一个行通过属性,javascript,Javascript,我正在尝试创建一个函数，每当鼠标悬停或单击列表项时，该函数都会向列表中添加一个line-through属性我的HTML： ``` <!DOCTYPE html> <html> <head> <title>Javascript + DOM</title> <link rel="stylesheet" type="text/css" href="style.css&q

我正在尝试创建一个函数，每当鼠标悬停或单击列表项时，该函数都会向列表中添加一个line-through属性

我的HTML：

``` <!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul class="noteList">
        <li class="bold red" random="23">Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

我的Javascript

var ul = document.querySelector("ul");
var ulclass = document.getElementsByClassName("noteList");

ul.style.background = "blue";

奇怪的是，当我使用ul.style时背景变成蓝色，当我使用ulclass.style类表单时，我得到一个script.js:35“Uncaught TypeError:无法设置未定义”错误的属性“background”

有没有办法避开这个问题？提前感谢。

ulclass不起作用，因为它是一个列表而不是单个对象。你必须循环浏览列表

for(var i =0;i<ulclass.length;i++){
    ulclass[i].style.background = "blue";
}

for（var i=0；idocument.getElementsByClassName返回HTMLCollection，而不是html元素，因此需要从该HTMLCollection中选择正确的元素以设置背景色。
就你而言：
var ulclass = document.getElementsByClassName("noteList");
ulclass[0].style.background = "blue";

您可以使用querySelectorAll（）
获取元素，并通过循环将事件（单击）附加到所有元素。在事件处理程序函数中，您可以切换类（完成）
演示：

var ul=document.querySelector（“ul”）；
var ulclass=document.queryselectoral（“.noteList”）；
ulclass.forEach（函数（li）{
li.addEventListener（'click'，函数（e）{
e、 target.classList.toggle（'done'）；
//或者如果您想添加该类
//e、 target.classList.add（'done'）；
});
});
ul.style.background=“蓝色”
。完成{
文字装饰：线条贯通；
}
购物清单
今天就完成
进入

笔记本电脑
果冻
菠菜
米饭
生日蛋糕
蜡烛

var ulclass = document.getElementsByClassName("noteList");
ulclass[0].style.background = "blue";