时间戳

首页 > 解决方案 > 通过没有值参数但带有文本的javascript更改字体

javascript - 通过没有值参数但带有文本的javascript更改字体

问题描述

我正在创建动态下拉列表，我想获取选项的名称。因为没有我们不能使用的值

document.querySelector('#hello').style.color=this.value;

所以 - 

<select id="hello">
            <option>a</option>
            <option>b</option>
</select>

<h1>HELLO</h1>


document.querySelector('#hello').onChange=function(){
               document.querySelector('h1').style.fontSize="120px";
               document.querySelector('h1').style.color=red;
               document.querySelector('h1').innerHTML='1222';

           };

我想要的是在更改选项 a 到 b 时更改 h1 颜色、大小和 innerHTML。

如何将带有文本 b/w 选项 HELLO 的 HELLO h1 标签分别更改 为a HELLO 到 b

标签： javascripthtml

解决方案

为达到预期结果，请进行以下更改

1.将onChange更改为onchange（小写）
请参阅此链接中的onchange事件详细信息 - https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange

  1. 在引号中提供颜色值，即 document.querySelector('h1').style.color='red'

codepen 供参考 - https://codepen.io/nagasai/pen/PdGVrO?editors=1010

document.querySelector('#hello').onchange=function(){
               document.querySelector('h1').style.fontSize="120px";
               document.querySelector('h1').style.color='red';
               document.querySelector('h1').innerHTML='1222';

           };
<select id="hello">
            <option>a</option>
            <option>b</option>
</select>

<h1>HELLO</h1>

推荐阅读