js怎么改变网页背景颜色,js修改背景颜色

发布时间：2023-12-08

js怎么改变网页背景颜色,js修改背景颜色

更新：2022-11-21 19:18

本文目录一览：

  1. JS实现鼠标滑过链接改变网页背景颜色的方法
  2. JS怎么改变背景颜色
  3. JS点击更换网页背景颜色。
  4. 怎样用js设置div的背景色

JS实现鼠标滑过链接改变网页背景颜色的方法

本文实例讲述了JS实现鼠标滑过链接改变网页背景颜色的方法。分享给大家供大家参考，具体如下： 这个小特效很不错，用链接改变网页背景色，鼠标放上链接文字上，网页背景就会跟着变换，想让你的主页更个性一点的朋友，这个代码一定能用上，其实你可在此基础上修改一下代码，改成鼠标放上文字切换样式表，这样整个网页就变了风格，是不是很实用？ 运行效果截图如下： 在线演示地址如下： 具体代码如下： html

<head>
  <title>鼠标放上链接改变网页背景颜色</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <script language="JavaScript">
    function goHist(a) {
      history.go(a);
    }
  </script>
</head>
<body>
  <center>
    <h2>鼠标放到相应链接上看看！</h2>
    <table border="1" borderlight="green" style="border-collapse: collapse" cellpadding="5" cellspacing="0">
      <tr>
        <td align="center">
          <a href="#" onMouseOver="document.bgColor='skyblue'">天空蓝</a>
          <a href="#" onMouseOver="document.bgColor='red'">大红色</a>
          <a href="#" onMouseOver="document.bgColor='#0066CC'">清新蓝</a>
        </td>
      </tr>
    </table>
  </center>
</body>

希望本文所述对大家JavaScript程序设计有所帮助。

JS怎么改变背景颜色

  1. 首先我们来创建一个p元素，在里面写上hello:
  2. 在浏览器界面上的显示如下。
  3. 接下来我们就为这个p元素来设置背景颜色。
  4. 接下来看看浏览器中变化。
  5. 说明我们就已经为p元素改好了背景色，如果要改变颜色的话直接在后面改就好。

JS点击更换网页背景颜色。

javascript脚本：

// 定义可换的颜色
var colors = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff", "#ff00ff"];
var index = 0;
// 换色方法
function changeColor() {
  // 获取颜色代码
  var color = colors[index++];
  // 更改文档的背景色
  document.bgColor = color;
  if (index == colors.length) {
    index = 0;
  }
}

HTML代码：

<input type="button" value="换色" onclick="changeColor();" />

怎样用js设置div的背景色

  1. 首先打开Dreamweaver软件，然后在body中写入一个div，把div赋予一个id方便提取；
  2. 用CSS写div属性和初始的背景色，width宽度值；height高度值；background初始的背景色；
  3. 写进script标签，定义一个变量mydiv获取前面定义好的div；
  4. 然后用onmouseover事件，鼠标移动时触发事件，来控制鼠标在div时，背景色变为红色；
  5. 接着用onmouseout事件，鼠标离开元素时触发事件，来控制div背景色变为绿色，如图所示。
推荐文章