Question

我想创建一个表单，为用户提供3个不同的选项来更改页面的背景颜色。当用户单击其中一个选项时，背景颜色会更改为匹配。还会创建一个带有一些基本文本的div。创建一个具有textarea的表单。使用document.getElementById（＆＃39; yourelementid＆＃39;）既可以找到textarea的值，也可以更改div中创建的基本文本。（提示：用户innerHTML）现在我知道如何做表单，但我不知道如何在用户点击该按钮时更改背景。我真的不了解如何使用innerHTML。如果有人可以解释或给我一些如何理解这一点的网站。谢谢。

好的，这是我到目前为止所得到的，我还没有理解......

  <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http:www.w3.org/1999/xhtml">
  <head>
   <title>background-color</title>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
 <script language="javascript" type="text/javascript">
  function changeBackgroundColor(objDivID)

   {
    var backColor = new String();

       backColor = document.getElementById(objDivID).style.backgroundColor;
    if(backColor.toLowerCase()=='#A20000C')

    {
    document.getElementById(objDivID).style.backgroundColor = '#DF64BD';

   }
    else
      {
   document.getElementById(objDivID).style.backgroundColor = '#FFDD73';
      }

    }

       </script>
      </head>
      <body>
      <h3>Change background color to:</h3>
      <div id="div1" style="background-color : #A2000C">
       <p><input type="radio" name="color" value="red" />Red<br />
      <input type="radio" name="color" value="pink" />Pink<br />
      <input type="radio" name="color" value="yellow" />Yellow<br />

      </div>
     <input type="button" value="click here"onclick="changeBackgroundColor('div1')"    /> 
      </body>
      </html>

我仍然不确定为什么我的盒子不大而且没有正确的颜色，我仍然必须在那里有一个盒子。要求更改颜色的文字。

Answer 1

以下是如何将页面的背景颜色设置为文本区域的值：

document.bgColor=document.getElementById('yourelementid').value;

Answer 2

您应该在颜色更改选项上添加一个事件处理程序，如下所示（假设它是一个选择框）：

<select id="colorSelect">
    <option value="red">red</option>
    <option value="green">green></option>
</select>

document.colorSelect.onchange = function(){
    document.elementToChangeColor.style.backgroundColor= this.value;
}

Answer 3

InnerHTML基本上是两个标签之间的所有东西（因此是内部HTML）：

<div>

现在要更改背景，您将从表单元素中获取值，然后编写类似这样的内容来更改背景颜色。

document.getElementById('your_element_id').style.backgroundColor = formElementValue

Answer 4

Mozilla文档很好地描述了innerHTML。您可能想要阅读该页面。

DOM对象的innerHTML属性以文本形式提供该对象的HTML内容。所以如果你有HTML：

<div id="myID"><span>Some text here!</span></div>

和javascript：

var theHTML = document.getElementById('myID').innerHTML;
alert(theHTML);

然后你会看到<span>Some text here!</span>。

如果将innerHTML属性设置为HTML字符串，它将更改值的内容。鉴于上面的HTML，如果您有以下javascript：

var myDiv = document.getElementById('myID');
myDiv.innerHTML = '<span>Now this is some other text</span>';

ID为myID的div将更改为显示包含“现在这是其他文字”的范围。

要更改背景颜色，请查看更改正文上的CSS属性。 This question会帮助您了解如何做到这一点。您需要调查document.body.style。

Answer 5

我会使用jQuery：

function selectionMade(color) {
    var body = $('body');
    body.css('background-color', color)

    var divWithSomeText = $('<div/>').Text = 'Some Text';
    body.Add(divWithSomeText);
}

jQuery使你想要做的事情变得非常简单。如果我是你，我会立即使用该库，以便将来再次使用它。

我需要在javascript中帮助DOM

5 个答案: