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

Question

我正在创建 HTML 选择下拉列表(字体大小)。当我从下拉列表中选择值时，例如 h1。

在下拉菜单下，我有需要应用 h1 的文本。

我试图为 H1 - h6 中的所有标题标签创建 css 类，并在每个选项的 onClick 中使用添加和删除应用 css。

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

但我现在不知道该怎么做。 Link

请帮我看看

Answer 1

您需要监听 select 元素上的 onchange 事件，并根据所选值将相应的类应用于 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>