JavaScript中修改背景颜色

最新推荐文章于 2024-09-07 10:47:49 发布

程序yan

最新推荐文章于 2024-09-07 10:47:49 发布

阅读量1.6w

点赞数 12

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_46149638/article/details/120605569

版权

javascript html

JavaScript 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

通过按钮的单击事件，传递参数给函数，从而实现相应的背景颜色变化。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变网页背景色</title>
    <script>
        function color(str){
        document.body.style.backgroundColor = str;
        }
    </script>
</head>
<body>

   <input type="button" value="设为红色" onclick="color('red')">
   <input type="button" value="设为蓝色" onclick="color('blue')">
   <input type="button" value="设为绿色" onclick="color('green')">
   <input type="button" value="设为黄色" onclick="color('yellow')">
</body>
</html>

通过按钮的单击事件，让color函数得到相应的‘str’值。

document.body.style.backgroundColor = str;

这句代码中，document.body元素的style对象中的backgroundColor属性，其中style对象表示元素的样式，backgroundColor属性表示CSS样式中的“background—color”。

演示结果截图：

初始状态

点击“设为红色按钮”

点击“设为蓝色”按钮

程序yan

关注

12
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录