带有 JavaScript 的 DOM 属性

Question

假设我希望用户能够使用 Javascript 和复选框列表来选择字体样式。

所以我有这个代码：

<input type="checkbox" id="Style0" />Bold

<input type="checkbox" id="Style1" />Italic

<input type="checkbox" id="Style2" />Underline<br/>

我是否需要创建一个 for 循环，如果它被检查则将其添加到 document.body.style.fontStyle？他们可以一次选择多个框并应用这些样式。

Answer 1

你可以做的是有如下三种不同的 CSS 样式：

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

使用 JQuery，您可以监听事件并将相关类应用于元素。

例如，如果您有以下段落元素：

<p id="paragraph">This is a paragraph.</p>

在您的 javascript 中，您将拥有：

$(document).ready(function() {
    $(document).on('change', '#style0, #style1, $style2', function() {
        var paragraph = $('#paragraph');

        if ($('#style0').is(':checked') && !paragraph.hasClass('bold')) {
            paragraph.addClass('bold');
        } else if (!$('#style0').is(':checked') && paragraph.hasClass('bold')) {
            paragraph.removeClass('bold');
        }

        if ($('#style1').is(':checked') && !paragraph.hasClass('italic')) {
            paragraph.addClass('italic');
        } else if (!$('#style1').is(':checked') && paragraph.hasClass('italic')) {
            paragraph.removeClass('italic');
        }

        if ($('#style2').is(':checked') && !paragraph.hasClass('underline')) {
            paragraph.addClass('underline');
        } else if (!$('#style2').is(':checked') && paragraph.hasClass('underline')) {
            paragraph.removeClass('underline');
        }
    });
});

更新：

对于纯 JavaScript 解决方案：

document.getElementById('style0').addEventListener('change', function() {
    var paragraph = document.getElementById('paragraph');

    if (this.checked) {
        paragraph.classList.add('bold');
    } else {
        paragraph.classList.remove('bold');
    }
});

document.getElementById('style1').addEventListener('change', function() {
    var paragraph = document.getElementById('paragraph');

    if (this.checked) {
        paragraph.classList.add('italic');
    } else {
        paragraph.classList.remove('italic');
    }
});

document.getElementById('style2').addEventListener('change', function() {
    var paragraph = document.getElementById('paragraph');

    if (this.checked) {
        paragraph.classList.add('underline');
    } else {
        paragraph.classList.remove('underline');
    }
});