为什么通过 JavaScript 添加样式不起作用答案

【问题标题】：Why adding style through JavaScript is not working为什么通过 JavaScript 添加样式不起作用
【发布时间】：2021-10-23 11:56:29
【问题描述】：

我是初学者，现在正在学习 JavaScript。我正在尝试制作一个javascript项目。在这个项目中，我正在尝试通过 javascript 添加样式。在我的项目中，有一个名为“关闭”的按钮（锚标记）。单击时，样式text-decoration: line-through 将添加到id 为issue-{id} 的描述中。但这种风格不起作用。单击关闭按钮时未添加样式。

查看第 29 和 53 行的 javascript 代码。

这是我的完整代码：

document.getElementById('issueInputForm').addEventListener('submit', submitIssue);

let issueCounterEl = document.getElementById("issue-counter");

function submitIssue(e) {
    const getInputValue = id => document.getElementById(id).value;
    const description = getInputValue('issueDescription');
    const severity = getInputValue('issueSeverity');
    const assignedTo = getInputValue('issueAssignedTo');
    const id = Math.floor(Math.random() * 100000000) + '';
    const status = 'Open';
    const issue = { id, description, severity, assignedTo, status };
    let issues = [];
    if (localStorage.getItem('issues')) {
        issues = JSON.parse(localStorage.getItem('issues'));
    }
    issues.push(issue);
    localStorage.setItem('issues', JSON.stringify(issues));
    document.getElementById('issueInputForm').reset();
    fetchIssues();
    e.preventDefault();
}

const closeIssue = id => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const currentIssue = issues.find(issue => issue.id == id);
    currentIssue.status = 'Closed';
    
    document.getElementById(`issue-${id}`).style.textDecoration = 'line-through'; // This line - line: 29. Id form line: 53

    localStorage.setItem('issues', JSON.stringify(issues));
    fetchIssues();
}

const deleteIssue = id => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const remainingIssues = issues.filter(issue => issue.id != id)
    localStorage.setItem('issues', JSON.stringify(remainingIssues));
    fetchIssues();
}

const fetchIssues = () => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const issuesList = document.getElementById('issuesList');
    issuesList.innerHTML = '';

    for (var i = 0; i < issues.length; i++) {
        const { id, description, severity, assignedTo, status } = issues[i];

        issuesList.innerHTML += `<div class="well">
                              <h6>Issue ID: ${id} </h6>
                              <p><span class="label label-info"> ${status} </span></p>
                              <h3 id="issue-${id}"> ${description} </h3> 
                              <p><span class="glyphicon glyphicon-time"></span> ${severity}</p>
                              <p><span class="glyphicon glyphicon-user"></span> ${assignedTo}</p>
                              <a href="#" onclick="closeIssue(${id})" class="btn btn-warning">Close</a>
                              <a href="#" onclick="deleteIssue(${id})" class="btn btn-danger">Delete</a>
                              </div>`;
    }
    issueCounterEl.innerText = issues.length;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Issue Tracker: </title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body onload="fetchIssues()">
    <div class="container">
        <h1>Issue Tracker: <span id="issue-counter"></span></h1>
        <div class="jumbotron">
            <h3>Add New Issue:</h3>
            <form id="issueInputForm">
                <div class="form-group">
                    <label for="issueDescription">Description</label>
                    <input type="text" class="form-control" id="issueDescription" placeholder="Describe the issue ...">
                </div>
                <div class="form-group">
                    <label for="issueSeverity">Severity</label>
                    <select id="issueSeverity" class="form-control">
                        <option value="Low">Low</option>
                        <option value="Medium">Medium</option>
                        <option value="High">High</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="issueAssignedTo">Assigned To</label>
                    <input type="text" class="form-control" id="issueAssignedTo" placeholder="Enter responsible ...">
                </div>
                <button type="submit" class="btn btn-primary">Add</button>
            </form>
        </div>
        <div class="col-lg-12">
            <div id="issuesList"></div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

</html>

chrome 开发工具中没有警告或错误。

我该如何解决这个问题？

【问题讨论】：

您设置了新样式，然后您调用fetchIssues()，它使用所有新元素重新创建 HTML，替换您刚刚分配样式的元素。当您将样式分配给特定元素时，而不是通过样式表应用的样式，则该样式仅适用于该特定元素。当您将元素替换为新元素时，之前的手动样式设置将不会出现在该新元素上。

标签： javascript html css ecmascript-6

【解决方案1】：

您的代码没问题，但有一个小错误。您只需将document.getElementById(`issue-${id}`).style.textDecoration = 'line-through'; 放在fetchIssues(); 之后即可。

然后会是这样的：

const closeIssue = id => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const currentIssue = issues.find(issue => issue.id == id);
    currentIssue.status = 'Closed';
    localStorage.setItem('issues', JSON.stringify(issues));
    fetchIssues();
    document.getElementById(`issue-${id}`).style.textDecoration = "line-through";
}

【讨论】：

【解决方案2】：

这是因为你在错误的元素上添加了 id，它应该在 <h6> 上，而你把它放在 <h3> 上。
注释您的 fetch 方法，因为它会覆盖您刚刚应用的样式。

见小提琴：https://jsfiddle.net/ramseyfeng/41kvwqye/

issuesList.innerHTML += `<div class="well">
                              <h6 id="issue-${id}">Issue ID: ${id} </h6>
                              <p><span class="label label-info"> ${status} </span></p>
                              <h3> ${description} </h3> 
                              <p><span class="glyphicon glyphicon-time"></span> ${severity}</p>
                              <p><span class="glyphicon glyphicon-user"></span> ${assignedTo}</p>
                              <a href="#" onclick="closeIssue(${id})" class="btn btn-warning">Close</a>
                              <a href="#" onclick="deleteIssue(${id})" class="btn btn-danger">Delete</a>
                              </div>`;

【讨论】：

抱歉。 h3 的 id 让您感到困惑。我将它设置为h3，而不是h6。如果我评论 fetch 方法，则样式应用正确，但 h6 的 interText 不会从 Open 更改为 Close。
文本在哪里？单击关闭按钮后，我可以看到状态从“打开”变为“关闭”。请仔细检查之前的小提琴。

【解决方案3】：

您无法在 UI 中看到删除线效果，因为您始终显示来自本地存储设置的信息。 您没有更新本地存储信息上的删除线样式效果。因此，在获取您的信息之前，请更新您的本地存储信息以获取具有删除线样式效果的特定 id，如下所示。

代替

document.getElementById(`issue-${id}`).style.textDecoration = 'line-through'; // This line - line: 29. Id form line: 53

在下面使用

issues.find(issue => issue.id == id).style.textDecoration = 'line-through';

以上行将更新本地存储值，您可以在 UI 中看到效果。

document.getElementById('issueInputForm').addEventListener('submit', submitIssue);

let issueCounterEl = document.getElementById("issue-counter");

function submitIssue(e) {
    const getInputValue = id => document.getElementById(id).value;
    const description = getInputValue('issueDescription');
    const severity = getInputValue('issueSeverity');
    const assignedTo = getInputValue('issueAssignedTo');
    const id = Math.floor(Math.random() * 100000000) + '';
    const status = 'Open';
    const issue = { id, description, severity, assignedTo, status };
    let issues = [];
    if (localStorage.getItem('issues')) {
        issues = JSON.parse(localStorage.getItem('issues'));
    }
    issues.push(issue);
    localStorage.setItem('issues', JSON.stringify(issues));
    document.getElementById('issueInputForm').reset();
    fetchIssues();
    e.preventDefault();
}

const closeIssue = id => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const currentIssue = issues.find(issue => issue.id == id);
    currentIssue.status = 'Closed';    
    issues.find(issue => issue.id == id).style.textDecoration = 'line-through';

    localStorage.setItem('issues', JSON.stringify(issues));
    fetchIssues();
}

const deleteIssue = id => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const remainingIssues = issues.filter(issue => issue.id != id)
    localStorage.setItem('issues', JSON.stringify(remainingIssues));
   fetchIssues();
}

const fetchIssues = () => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const issuesList = document.getElementById('issuesList');
    issuesList.innerHTML = '';

    for (var i = 0; i < issues.length; i++) {
        const { id, description, severity, assignedTo, status } = issues[i];

        issuesList.innerHTML += `<div class="well">
                              <h6>Issue ID: ${id} </h6>
                              <p><span class="label label-info"> ${status} </span></p>
                              <h3 id="issue-${id}"> ${description} </h3> 
                              <p><span class="glyphicon glyphicon-time"></span> ${severity}</p>
                              <p><span class="glyphicon glyphicon-user"></span> ${assignedTo}</p>
                              <a href="#" onclick="closeIssue(${id})" class="btn btn-warning">Close</a>
                              <a href="#" onclick="deleteIssue(${id})" class="btn btn-danger">Delete</a>
                              </div>`;
    }
    issueCounterEl.innerText = issues.length;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Issue Tracker: </title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body onload="fetchIssues()">
    <div class="container">
        <h1>Issue Tracker: <span id="issue-counter"></span></h1>
        <div class="jumbotron">
            <h3>Add New Issue:</h3>
            <form id="issueInputForm">
                <div class="form-group">
                    <label for="issueDescription">Description</label>
                    <input type="text" class="form-control" id="issueDescription" placeholder="Describe the issue ...">
                </div>
                <div class="form-group">
                    <label for="issueSeverity">Severity</label>
                    <select id="issueSeverity" class="form-control">
                        <option value="Low">Low</option>
                        <option value="Medium">Medium</option>
                        <option value="High">High</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="issueAssignedTo">Assigned To</label>
                    <input type="text" class="form-control" id="issueAssignedTo" placeholder="Enter responsible ...">
                </div>
                <button type="submit" class="btn btn-primary">Add</button>
            </form>
        </div>
        <div class="col-lg-12">
            <div id="issuesList"></div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

</html>

【讨论】：

【解决方案4】：

您的 JavaScript 在渲染完成之前运行，因此您需要等待它完成并使用

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
/// add code here
});

【讨论】：

【解决方案5】：

只是一个小提示：（不会解决您的问题）设置另一个变量作为元素：

issueid = document.getElementById(`issue-${id}`)

然后，执行以下操作：

issueid.style.textDecoration = 'line-through';

（我知道这应该在 cmets 中，但我没有足够的代表。）

【讨论】：

【解决方案6】：

试试这个

document.getElementById(`issue-${id}`).style.textDecoration = "line-through";

【讨论】：