javascript - 当有带有 CSS 的 Bootstrap 按钮时启用段落的背景颜色 <p>？

Question

以下 fiddle 允许动态创建段落以及更改每个段落的背景颜色和样式 <p> .

---

是否有可能，在下面的 fiddle 中，仍然允许每个动态创建的段落背后的背景颜色<p>要打印而不是删除。

问题是，当尝试打印时，每个段落部分的背景颜色正在被删除 bootstrap CSS。

附件是Fiddle

更新的 Fiddle 将不胜感激，因为我仍然是编码新手。

谢谢!

HTML:

<div>
<div id="styles">
    <label>Color:
        <select data-property="color">
            <option disabled>Select color:</option>
            <option>red</option>
            <option>green</option>
            <option>blue</option>
        </select>
    </label>
    <label>Font-size:
        <select data-property="font-size">
            <option disabled>Select font-size:</option>
            <option>smaller</option>
            <option>10px</option>
            <option>12px</option>
            <option>14px</option>
            <option>16px</option>
            <option>18px</option>
            <option>20px</option>
            <option>larger</option>
        </select>
    </label>
    <label>Background-color:
        <select data-property="background-color">
            <option disabled>Select background-color:</option>
            <option>aqua</option>
            <option>fuchsia</option>
            <option>limegreen</option>
            <option>silver</option>
        </select>
    </label>
</div>
<div id="text_land">xzxz</div>
<textarea></textarea>
<button>Go</button>

JQuery:

$(function () {
$('button').on('click', function () {
    var v = $('#text_land + textarea').val(),
        paragraphs = '<p>' + v.split(/\n\n/).join('</p><p>') + '</p>';
    $(paragraphs).appendTo('#text_land');
});

$('select').on('change', function () {
    var targets = $('#text_land p'),
        property = this.dataset.property;

    targets.css(property, this.value);
}).prop('selectedIndex', 0);
});

Answer 1

不确定您的问题...您可以尝试将您选择的值应用到刚刚创建的段落。

$('select').each(function() {
    var $this = $(this);
    paragraphs.css($this.data('property'), $this.val());
});

JSFiddle example