如何用JavaScript实现点击动态修改列表项样式？

嘿，我来帮你排查下问题～你的实现思路完全没问题，但有两个小细节没处理到位，导致JavaScript代码没生效：

1. JavaScript执行时机不对 #

你把<script>标签放在了<html>结构的前面，这时候浏览器还没解析到页面里的<ul>元素呢！执行document.querySelector('ul')会返回null，自然没法给列表绑定点击事件。

解决办法有两种，选最顺手的就行：

• 把<script>标签移到<body>的最末尾，确保所有DOM元素加载完成后再执行JS代码
• 用DOMContentLoaded事件包裹你的代码，等待页面DOM完全加载后再运行逻辑

2. ID与类名重复的小隐患 #

你给第一个<li>加了id="checked"，而你的CSS类名也是.checked。虽然这不会直接导致功能失效，但ID是页面唯一标识，和类名同名容易造成混淆，建议把这个ID去掉或者改成别的（比如id="task-laundry"）。

修正后的完整可运行代码 #

下面是调整后的代码，我用了把script放在body末尾的方式，更简单直观：

<html>
<head>
    <style>
        .checked {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <ul id="toDoList">
        <!-- 移除了容易混淆的id="checked" -->
        <li>Do laundry</li>
        <li>Wash car</li>
    </ul>

    <!-- 将script移到body末尾，确保DOM已加载 -->
    <script>
        var list = document.querySelector('ul');
        list.addEventListener('click', function(ev) {
            if (ev.target.tagName === 'LI') {
                ev.target.classList.toggle('checked');
            }
        }, false);
    </script>
</body>
</html>

另一种可选写法（保留script在head中） #

如果你希望script放在head标签里，可以用DOMContentLoaded事件来等待DOM加载：

<html>
<head>
    <style>
        .checked {
            text-decoration: line-through;
        }
    </style>
    <script>
        // 等待DOM加载完成后再执行代码
        document.addEventListener('DOMContentLoaded', function() {
            var list = document.querySelector('ul');
            list.addEventListener('click', function(ev) {
                if (ev.target.tagName === 'LI') {
                    ev.target.classList.toggle('checked');
                }
            }, false);
        });
    </script>
</head>
<body>
    <ul id="toDoList">
        <li>Do laundry</li>
        <li>Wash car</li>
    </ul>
</body>
</html>

现在点击列表项应该就能正常添加/移除删除线啦！刚开始学JS遇到这种DOM加载顺序的问题很正常，多试几次就熟悉啦 😊

内容的提问来源于stack exchange，提问作者Olivia Christensen