js實現(xiàn)網頁換膚

更新時間：2022年07月01日 17:08:19 作者：標準形與二次型

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

本文實例為大家分享了js實現(xiàn)網頁換膚的具體代碼，供大家參考，具體內容如下

效果：

代碼：

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0px;
?? ??? ??? ??? ?padding: 0px;
?? ??? ??? ?}
?? ??? ??? ?body{
?? ??? ??? ??? ?height: 100%;
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?#main{
?? ??? ??? ??? ?height: 720px;
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?background-color: pink;
?? ??? ??? ?}
?? ??? ??? ?button{
?? ??? ??? ??? ?height: 15px;
?? ??? ??? ??? ?width: 15px;
?? ??? ??? ??? ?border: 1px solid #fff;
?? ??? ??? ??? ?margin: 10px 10px;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?#red{
?? ??? ??? ??? ?background-color: red;
?? ??? ??? ?}
?? ??? ??? ?#green{
?? ??? ??? ??? ?background-color: green;
?? ??? ??? ?}
?? ??? ??? ?#blue{
?? ??? ??? ??? ?background-color: blue;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div id="main">
?? ??? ??? ?<button type="button" id="red" onclick="red()"></button>
?? ??? ??? ?<button type="button" id="green" onclick="green()"></button>
?? ??? ??? ?<button type="button" id="blue" onclick="blue()"></button>
?? ??? ?</div>
?? ??? ?
?? ??? ?<script type="text/javascript">
?? ??? ??? ?var x=document.getElementById('main');
?? ??? ??? ?function red(){
?? ??? ??? ??? ?x.style.backgroundColor='red';
?? ??? ??? ??? ?
?? ??? ??? ??? ?document.getElementById('red').style.border="3px solid white";
?? ??? ??? ??? ?document.getElementById('green').style.border="1px solid white";
?? ??? ??? ??? ?document.getElementById('blue').style.border="1px solid white";
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?function green(){
?? ??? ??? ??? ?x.style.backgroundColor='green';
?? ??? ??? ??? ?document.getElementById('green').style.border="3px solid white";
?? ??? ??? ??? ?document.getElementById('red').style.border="1px solid white";
?? ??? ??? ??? ?document.getElementById('blue').style.border="1px solid white";
?? ??? ??? ?}
?? ??? ??? ?function blue(){
?? ??? ??? ??? ?x.style.backgroundColor='blue';
?? ??? ??? ??? ?document.getElementById('blue').style.border="3px solid white";
?? ??? ??? ??? ?document.getElementById('red').style.border="1px solid white";
?? ??? ??? ??? ?document.getElementById('green').style.border="1px solid white";
?? ??? ??? ?}
?? ??? ?</script>
?? ?</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: