改变诗篇颜色

效果图如下：

改变诗篇颜色

html结构代码：

<style>
.poem span{
    font-size: 12px;
    font-weight: bold;
}
</style>
<select name="color">
    <option value="0">请选择颜色</option>
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
    <option value="green">绿色</option>
</select>
<div class="poem">
    <h3>我爱学习</h3>
    <span>作者：王杰</span>
    <p>我爱杯中酒，爱之不敢求。</p>
    <p>学道北海仙，习之势翩翩。</p>
</div>

js代码如下：

// 获取标签
var select = document.querySelector('[name="color"]');
var poem = document.querySelector('.poem');
select.onchange = function(){
    // 获取到当前选择的option的value
    var color = this.value;
    // 将获取到的颜色设置给诗篇
    poem.style.color = color;
}