设计JavaScript程序实现以下功能:在网页中改变下拉框中的文本域内容,触发change事件,动态改变网页中内容“我是一名大学生”文本的字体、大小、颜色相关样式。
时间: 2024-05-01 14:16:49 浏览: 57
HTML代码:
```
<select id="select">
<option value="default">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
<p id="text">我是一名大学生</p>
```
JavaScript代码:
```
const select = document.getElementById('select');
const text = document.getElementById('text');
select.addEventListener('change', () => {
switch (select.value) {
case 'red':
text.style.color = 'red';
text.style.fontSize = '24px';
text.style.fontWeight = 'bold';
break;
case 'blue':
text.style.color = 'blue';
text.style.fontSize = '20px';
text.style.fontWeight = 'normal';
break;
case 'green':
text.style.color = 'green';
text.style.fontSize = '16px';
text.style.fontWeight = 'lighter';
break;
default:
text.style.color = 'black';
text.style.fontSize = '16px';
text.style.fontWeight = 'normal';
break;
}
});
```
当下拉框的选项发生改变时,会触发change事件,并根据选择的选项动态改变文本的样式,包括字体颜色、大小和粗细。如果选择的是“请选择”选项,则恢复默认样式。
阅读全文