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');
    }
});

JavaScript的DOM属性

1 个答案: