javascript - 我需要有关 javascript 中 DOM 的帮助

标签 javascript

我想创建一个表单,为用户提供 3 个不同的选项来更改页面的背景颜色。当用户单击其中一个选项时,背景颜色会更改以匹配。并且还创建一个包含一些基本文本的 div 以开始。创建一个具有文本区域的表单。使用 document.getElementById('yourelementid') 查找文本区域的值并更改在 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>

我仍然不确定为什么我的盒子没有那么大并且没有改变颜色,我仍然必须在那里放一个盒子。要求更改文本的颜色。

最佳答案

您应该在颜色更改选项上添加一个事件处理程序,如下所示(假设它是一个选择框):

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

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

关于javascript - 我需要有关 javascript 中 DOM 的帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5677317/

相关文章:

javascript - Push() 在 JavaScript 中不起作用

javascript - For 语句在上次赋值时返回意外值

javascript - 试图捕获在 jQuery 中选择了哪个按钮

javascript - 如何将鼠标悬停在对象后面?

javascript - 隐藏表格中的元素

javascript - 如何让Intro.js选择页面加载后动态生成的元素

javascript - 如何将参数从 Tornado 传递到 js 文件而不是 html?

javascript - Gulp Watch Task 不适用于 SASS

javascript - 如何将 HTML CSS 图像 slider 转换为 Angular 图像 slider ?

javascript - 如何从 R Shiny 中的 JavaScript 获取屏幕分辨率?