html选择选项将javascript函数应用于div

Question

我正在创建HTML select下拉列表(font-size).当我从下拉列表中选择值时,例如h1.

在下拉列表中,我有需要应用h1的文本.

我试图为H1-h6中的所有标题标签创建css类,并且在每个选项的onClick上使用add和remove来应用css.

<select>
    <option>h1</option>
    <option>h2</option>
    <option>h3</option>
</select>
<div id="text">
    Text
</div>

但我现在不知道如何做到这一点. 链接

请帮助我如何

Answer 1

您需要onchange在select元素上侦听事件,并根据所选值将相应的类应用于div.

一种可能的实现:

// Get select element
var select = document.querySelector('select');

// Bind onchange event
select.onchange = function() {
    document.querySelector('#text').className = this.value;
};

// Trigger event to apply initial value
select.onchange();

.h1 {font-size: 32px;}
.h2 {font-size: 24px;}
.h3 {font-size: 19px;}

<select>
    <option value="h1">h1</option>
    <option value="h2">h2</option>
    <option value="h3">h3</option>
</select>

<div id="text">Text</div>