Свойства DOM с JavaScript

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

UPDATE:

Для решения на чистом 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');
    }
});