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

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

2024-09-10 20:48:38   214人阅读

又遇到颜色主题变化，这次使用了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输入颜色值进行改变）的代码。

如有错误，请您指正！

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


联系
我们