js實(shí)現(xiàn)一鍵換膚效果

更新時(shí)間：2022年07月01日 15:29:01 作者：Cheryl71

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)一鍵換膚效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)一鍵換膚效果的具體代碼，供大家參考，具體內(nèi)容如下

方法1

<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>一鍵換膚</title>
? <style>
? ? :root {
? ? ? --color: white;
? ? }

? ? .card {
? ? ? width: 120px;
? ? ? height: 200px;
? ? }

? ? .controller {
? ? ? display: flex;
? ? ? justify-content: space-between;
? ? ? align-items: center;
? ? ? padding: 10px;
? ? }

? ? .btn {
? ? ? border: none;
? ? ? height: 30px;
? ? ? width: 100px;
? ? ? color: #eeeeee;
? ? ? background: linear-gradient(45deg, #ce7777, lightblue, #c19fc1, transparent);
? ? ? border-radius: 999px;
? ? ? box-shadow: 0 0 2px 2px #eeeeee;
? ? ? cursor: pointer;
? ? }

? ? .card {
? ? ? border-radius: 5px;
? ? ? box-shadow: 0 0 2px 2px rgb(126, 124, 124);
? ? }

? ? .card:nth-child(1) {
? ? ? background: black;
? ? }

? ? .card:nth-child(3) {
? ? ? background: white;
? ? }

? ? html, body {
? ? ? background: var(--color);
? ? ? opacity: 0.9;
? ? }
? ? body {
? ? ? height: 100vh;
? ? }
? ? *{
? ? ? margin: 0;
? ? ? padding: 0;
? ? }
? </style>
</head>

<body>

? <div class="controller">
? ? <div class="card"></div>
? ? <div><button class="btn" onclick="changeSkin()">一鍵換膚</button></div>
? ? <div class="card"></div>
? </div>

</body>

</html>

方法2

<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>change skin</title>
? <style id="theme">
? ? :root {
? ? ? --bgColor: #f00;
? ? }

? ? .skin {
? ? ? background: var(--bgColor);
? ? ? width: 200px;
? ? ? height: 200px;
? ? }
? </style>
</head>

<body>
? <div class="skin"></div>
? <button type="button" onclick="changeSkin('black')">change theme</button>
? <script>
? ? changeSkin = (theme) => {
? ? ? console.log("function starts");
? ? ? document.getElementById("theme").innerHTML = `
? ? ? ? :root{--bgColor:${theme};}
? ? ? ? .skin {
? ? ? ? ? background: var(--bgColor);
? ? ? ? ? width: 200px;
? ? ? ? ? height: 200px;
? ? ? ? }
? ? ? `
? ? }
? ?
? </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript面試技巧之?dāng)?shù)組的一些不low操作
這篇文章主要給大家介紹了關(guān)于JavaScript面試技巧之?dāng)?shù)組的一些不low操作的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
HTML長文本截取含有HTML代碼同樣適用的兩種方法
正如標(biāo)題所言我們可以使用CSS截?cái)嘧址篒E,FireFox，Opera ，Safari都兼容也可以使用js截取，具體實(shí)現(xiàn)如下，希望對(duì)大家有所幫助
2013-07-07
JavaScript定時(shí)器實(shí)現(xiàn)無縫滾動(dòng)圖片
這篇文章主要為大家詳細(xì)介紹了JavaScript定時(shí)器實(shí)現(xiàn)無縫滾動(dòng)圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
基于Javascript實(shí)現(xiàn)返回頂部按鈕
這篇文章主要為大家詳細(xì)介紹了基于Javascript實(shí)現(xiàn)返回頂部按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-02-02
js前端處理跨域的九種方式
本文主要介紹了js前端處理跨域的九種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-07-07
ES6 Object屬性新的寫法實(shí)例小結(jié)
這篇文章主要介紹了ES6 Object屬性新的寫法,結(jié)合實(shí)例形式總結(jié)分析了ES6中object屬性的常見簡化寫法,需要的朋友可以參考下
2019-06-06
JS腳本實(shí)現(xiàn)動(dòng)態(tài)給標(biāo)簽控件添加事件的方法
這篇文章主要介紹了JS腳本實(shí)現(xiàn)動(dòng)態(tài)給標(biāo)簽控件添加事件的方法,結(jié)合實(shí)例形式分析了javascript添加事件監(jiān)聽的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-06-06
JavaScript 利用Cookie記錄用戶登錄信息
JavaScript與Cookie之利用Cookie記錄用戶登錄信息
2009-12-12
vue路由權(quán)限校驗(yàn)功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由權(quán)限校驗(yàn)功能的實(shí)現(xiàn)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
JScript中的prototype(原型)屬性研究
我們知道JScript中對(duì)象的prototype屬性，是用來返回對(duì)象類型原型的引用的。
2010-04-04