欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

结合H5和JS修改背景颜色

程序员文章站 2022-06-22 19:55:16
使用H5表单新增加的type元素进行选择颜色,接着定义一个方法,在onchange事件会在域的内容改变时发生的时候触发,操作谁就获取谁来操作。

使用H5表单新增加的type元素进行选择颜色,接着定义一个方法,在onchange事件会在域的内容改变时发生的时候触发,操作谁就获取谁来操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    颜色:<input type="color" id="col" onchange="changeColor()">
    <script>
    var color=document.getElementById("col");//操作谁就获取谁
    function changeColor(){
        document.body.style.backgroundColor=color.value;//将h5所选择的颜色值赋值给背景颜色
    }
</script>
    
</body>
</html>
    

运行结果:

结合H5和JS修改背景颜色
实践是检验真理的唯一标准。

本文地址:https://blog.csdn.net/Dreamer_Ji/article/details/107359483