如何在 JavaScript 对象属性的值上添加样式答案

【问题标题】：How to add style on a value of JavaScript object property如何在 JavaScript 对象属性的值上添加样式
【发布时间】：2026-01-15 07:45:01
【问题描述】：

我正在尝试将样式 [text-decoration: line-through] 添加到对象属性的值中。如何在javascript代码第28行closeIssue添加样式？

我想为currentIssue.description 添加样式。

这是我的代码：

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

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 }; // issue = object
    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';
    // How to add a style on "currentIssue.description"
    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="xxx"> ${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>`;
    }
}

<!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">
    <style>
        .lt {
            text-decoration: line-through;
        }
    </style>
</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>

我该怎么做？

【问题讨论】：

标签： javascript html css ecmascript-6 local-storage

【解决方案1】：

你可以试试这个： value.style.textDecoration = 'line-through'

【讨论】：

currentIssue.description.style.textDecoration = 'line-through' 抛出错误为Cannot set property 'textDecoration' of undefined