gpt4 book ai didi

javascript - 根据选择在文本区域中进行更改

转载 作者:太空宇宙 更新时间:2023-11-04 07:33:39 24 4
gpt4 key购买 nike

我需要制作一个程序,当我从下拉列表中选择字体系列、字体大小、背景颜色和文本颜色时,应对文本区域中的文本进行相同的更改。截至目前,如果我更改背景颜色,只会发生变化,文本区域不会发生任何其他变化。请帮忙。

<html>

<head>
<title>Binding</title>
</head>

<body>
<script>
function changeColor() {
var newColor = document.getElementById('bgColorPicker').value;
document.bgColor = newColor;
}

function changeFont(){
var newFont=document.getElementById('fontPicker').value;
document.getElementById('textarea').style.fontStyle=newFont;
}

function changeFontSize(){
var newFontSize=document.getElementById('fontSizePicker').value;
document.getElementById('textarea').style.fontSize=newFontSize;
}

function changeTextColor(){
var newTextColor=document.getElementById('textColorPicker').value;
document.getElementById('textarea').color=newTextColor;
}
</script>

<select id="bgColorPicker" onchange="changeColor()">
<option value="transparent">--Select--</option>
<option value="#FFFF99">Yellow</option>
<option value="#0099CC">Blue</option>
<option value="limegreen"> Green</option>
</select>
<br>
<select id="fontPicker" onchange="changeFont()">
<option value="transparent">--Select--</option>
<option value="Arial">Yellow</option>
<option value="Verdana">Blue</option>
<option value="Georgia"> Green</option>
</select>
<br>
<select id="textColorPicker" onchange="changeTextColor()">
<option value="transparent">--Select--</option>
<option value="#DAA520">GoldenRod</option>
<option value="#6B8E23">OliveDrab</option>
<option value="#DC143C">Crimson</option>
</select>
<select id="fontSizePicker" onchange="changeFontSize()">
<option value="transparent">--Select--</option>
<option value="100px">Large</option>
<option value="50px">Medium</option>
<option value="20px">Small</option>
</select>

TextArea:<textarea name='textarea' rows='15' cols='50'></textarea>

</body>

</html>

最佳答案

  1. 您忘记将 id 添加到文本区域
  2. document.getElementById('textarea').color 应该是 document.getElementById('textarea').style.color
  3. document.getElementById('textarea').style.fontStyle 应该是 document.getElementById('textarea').style.fontFamily

function changeColor() {
var newColor = document.getElementById('bgColorPicker').value;
document.bgColor = newColor;
}

function changeFont() {
var newFont = document.getElementById('fontPicker').value;
document.getElementById('textarea').style.fontFamily = newFont;
}

function changeFontSize() {
var newFontSize = document.getElementById('fontSizePicker').value;
document.getElementById('textarea').style.fontSize = newFontSize;
}

function changeTextColor() {
var newTextColor = document.getElementById('textColorPicker').value;
document.getElementById('textarea').style.color = newTextColor;
}
<select id="bgColorPicker" onchange="changeColor()">
<option value="transparent">--Select--</option>
<option value="#FFFF99">Yellow</option>
<option value="#0099CC">Blue</option>
<option value="limegreen"> Green</option>
</select>
<br>
<select id="fontPicker" onchange="changeFont()">
<option value="transparent">--Select--</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Georgia"> Georgia</option>
</select>
<br>
<select id="textColorPicker" onchange="changeTextColor()">
<option value="transparent">--Select--</option>
<option value="#DAA520">GoldenRod</option>
<option value="#6B8E23">OliveDrab</option>
<option value="#DC143C">Crimson</option>
</select>
<select id="fontSizePicker" onchange="changeFontSize()">
<option value="transparent">--Select--</option>
<option value="100px">Large</option>
<option value="50px">Medium</option>
<option value="20px">Small</option>
</select> TextArea:

<textarea name='textarea' id="textarea" rows='15' cols='50'></textarea>

关于javascript - 根据选择在文本区域中进行更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49158453/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com