jquery+css实现网页颜色主题变换（只改变已设置好的几种颜色主题）

时间：2021-09-16 00:29:27

又遇到颜色主题变化，这次使用了jquery+css，使用了函数传值，而不是之前网站换肤改变link的方法。

首先是设置好颜色主题后，点击改变页面颜色主题。（需要自行导入jquery.js后查看效果）

直接贴代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/JavaScript" src="js/jquery.js"></script>

</head>

<style>

    div section{

        width: 30px;

        height: 30px;

        margin: 10px;

        display: inline-block;

    }

    div section:nth-of-type(1){

        background-color: #177cb0;

    }

    div section:nth-of-type(2){

        background-color: #db5a6b;

    }

    div section:nth-of-type(3){

        background-color: #008000;

    }

    div section:hover{

        cursor:pointer;

    }

</style>

<body>

    <div>

        <section onclick="blue()"></section>

        <section onclick="red()"></section>

        <section onclick="green()"></section>

    </div>

    <center>

        <h2 style="display:inline-block;">颜色主题jquery变换</h2>

        <form action="" id="simpleCalc">

            <span>input：</span><input type="text" required><br><br>

            <button id="calc">确认</button>

        </form>

        <span id="result"></span>

    </center>

    <script>

      //设置默认颜色主题

        $(document).ready(function(){

            blue();

        });

        // 点击单个换色

        function blue(){

            change("#177cb0");

        }

        function red(){

            change("#db5a6b");

        }

        function green(){

            change("#008000");

        }

        //设置需要改变颜色的元素及其样式

        function change(colo){

            $("#calc").css("background-color", colo);

            $("h2, span").css("color", colo);

            $("input").css("color", colo);

            $("input[type=text]").focus(function(){$(this).css("outline", "none")});

            $("input[type=text]").focus(function(){$(this).css("border", "2px solid " + colo)});

            $("input[type=text]").blur(function(){$(this).css("border", "1px solid gray")});

        }

    </script>

</body>

</html>

下一篇贴即时变化颜色主题（通过input输入颜色值进行改变）的代码。

如有错误，请您指正！

相关文章