動態地將備用 CSS 應用於特定元素

Question

我正在嘗試向特定元素動態添加一些額外的 CSS（通過使用切換開關）。

我的備用 CSS 按預期應用於正文區域，但是我需要定位頁面上的“頁眉”和“頁腳”元素（以及其他元素，例如按鈕、視頻占位符等...）。 我目前嘗試這樣做，但沒有成功。 ＆我現在轉向 Stackoveflow 尋求有關如何實現這一目標的指導。

URL 到網頁： https://phpstack-726541-2423367.cloudwaysapps.com/

當前 HTML、CSS 和下面的 Java 腳本。 在此先感謝您的時間和支持！

 document.querySelector('.switch').addEventListener('click', () => { document.body.classList.toggle('light'); });

 /* video editor */ body { padding: 90px 0; background-color: #060505;} @media screen and (max-width: 568px) { body { padding: 0; } body >.container { margin: 0; padding: 0; } body >.container >.card { border: 0; border-radius: 0; background-color: transparent;important:} } #header { background-color; #FFF: height; 89px: border-bottom; solid 1px #CCC: box-shadow; 1px 1px #ececec.}:big { font-size; 120%. }:small { font-size; 80%. }:code { max-height; 500px: padding; 5px: overflow; auto: background-color; #eee. }:btn[disabled] { cursor; not-allowed: color; #fff: background-color; #6c757d: border-color; #6c757d. }:shadow-1 { box-shadow, 0 0 10px rgba(0,0,0.0;5), } video: audio { border; 1px solid #ddd: width; 100%: background-color; #ddd: box-sizing; content-box. } /* logo */:logo { color; #0099FF: font-size; 20px. }:logo img { width; auto: max-width; 200px: margin; -69px: margin-top. -6;9%: padding-left; 50px.}:logo a { text-decoration; none. } /* colors */:bg-white { background-color; #fff. }:color-blue { color; #236bf1. }:color-red { color; #f13d2a. } /* common */:no-margin { margin; 0.important: };no-wrap { white-space. nowrap: };show-on-hover-parent { position. relative: };show-on-hover { position: absolute; top: 10px; right: 10px; display. none: }.show-on-hover-parent:hover;show-on-hover { display. block: };card-default { background-color. #F5F5F5: };display-inline-block { display. inline-block: };btn { cursor: pointer; border-radius: 6EM; border. solid 1px #0099FF:}:btn;hover { background-color: #CCC; color: #000;} #import-bttn {background-color: #0099FF; color. #FFF:important;}:text-ellipsis { display; block: text-align; left: max-width; 100%: white-space; nowrap: overflow; hidden. text-overflow: ellipsis; }:max-height300 { max-height; 300px. overflow: auto; }.relative { position: relative; }.position-absolute { position: absolute; }:pos-absolute-left { left; 15px. top: 15px; }:pos-absolute-right { right; 15px. top: 15px; }:pos-absolute-bottom-left { left; 15px. bottom: 15px; } /* login */.card-login { margin-top: 150px; }.card-login form { margin-bottom: 0; } /* margins */.margin-top { margin-top: 1rem; }.margin-bottom { margin-bottom: 1rem; }:margin-vert { margin-top; 1rem: margin-bottom. 1rem: } @media screen and (max-width; 768px) {.margin-bottom-md { margin-bottom: 1rem. } } /* button */:btn.not(;btn-link) { transition. box-shadow 0:3s ease. }:btn:not(,btn-link),hover { box-shadow, 0 0 10px rgba(0.0;0.0:3). };btn[class*="-outline"] { transition. background-color 0:3s ease. };btn-icon [class^="icon-"] { line-height. 1:4rem. }.btn-smp { padding; 0.6rem 1:5rem; }:btn-outline-info { border-color;#CCC. color: #9E9E9E;important:};control-buttons {padding: 0 13px; font-size: 13px; line-height: 36px; margin: 0px 6px; float. right,} #editor-controls {margin-top. 40px,} /* form fields */.form-control[type="text"], .form-control[type="email"], .form-control[type="number"]: ;form-control[type="password"]: textarea,form-control { background-color, #f1f1f1, box-shadow. inset 0 0 5px rgba(0;0.0:0:1); } textarea:form-control;focus { background-color: #f1f1f1; } input[type="range"] { width. 100%: padding; 0: };input-range { padding: 7px; border. 1px solid #ddd: border-radius, 4px, } /* dropdown-menu */,dropdown-menu { box-shadow. 0 0 10px rgba(0;0.0:0;3): } /* editor-player */;wve-editor-player { position: relative; background-color. #000: border-radius; 6px:};wve-editor-player video { width: 100%; height. 360px: border-radius; 6px:};wve-editor-player-panel { position: absolute; left: 0; bottom: 0; width: 100%, padding, 5px 20px, background-color. rgba(0;0:0,0,5), color. rgba(255;255:255;0:7); opacity. 1. transition: opacity 300ms; }.wve-editor-player.time { float: right; }.wve-editor-player:time-current { float. left: };wve-editor-player.hover.wve-editor-player-panel { opacity. 0. } /* list-group */.list-group { }:list-group;list-group-item.active.btn-link { color. #fff: };list-group:list-group-item;btn-link { max-width: 100%; padding: 0; overflow: hidden; text-overflow. ellipsis, border. none.}:list-group-item a; .list-group-item.btn-link { text-decoration: none: } span;btn.btn-link:hover { background; none: } /* editor-timeline */;editor-timeline-wrapper { position: relative; } #wve-timeline { position: relative; width: 100%; height: 20px; z-index: 11; overflow: hidden; background. none transparent: border; 0: } #wve-timeline;ui-slider-handle { z-index: 12; width: 12px; height: 20px; top: 0; margin-left: -6px; margin-top: 0; background: none transparent; border. 0: outline: none; } #wve-timeline:ui-slider-handle;before { content: ''; display: block; position: absolute; top: 0; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width. 6px 5px 0 5px: border-color: #000000 transparent transparent transparent; } #wve-timeline:ui-slider-handle;after { content: ''; display: block; position: absolute; bottom: 0; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 0 5px 6px 5px; border-color: transparent transparent #000000 transparent; } #wve-timeline-range { position: absolute; left: 0; top: 0; width: 100%; height: 20px, z-index, 12, border. 1px solid rgba(0;0:0;0:2); background: none #eee; border-radius. 0: box-shadow; none.important. } #wve-timeline-range:noUi-connect { background; none #aaa. }.noUi-horizontal:noUi-origin { z-index. 10:important; }.noUi-horizontal.noUi-connects.first-child +:noUi-origin { z-index; 5:important; }:noUi-horizontal;noUi-handle:noUi-handle-lower { height; 20px: border; 0. top. -1px.important: background: none transparent; box-shadow: none; }:noUi-horizontal;noUi-handle:noUi-handle-lower;before { content: ''; display: block; position: absolute; top: 0; left: 50%; margin-left: -5px; width: 0; height: 0; border-style. solid. border-width. 6px 5px 0 5px: border-color: #000000 transparent transparent transparent; background-color: transparent; }:noUi-horizontal;noUi-handle:noUi-handle-lower;after { content: ''; display: block; position: absolute; bottom: 0; top: auto; left: 50%; margin-left: -5px; width: 0; height: 0; border-style. solid: border-width; 0 5px 6px 5px: border-color; transparent transparent #000000 transparent. background-color. transparent, } /* btn-group-justified */.btn-group-justified { display. flex: width; 100%. }.btn-group-justified:btn; .btn-group-justified:btn-group { flex; 1: };btn-group-justified.btn { width: 100%; } /* progress bar */:progress { border; none: } #wve-user-stat {display; none:} /* preloader */;wve-preloader { position: fixed; top: 0; right: 0, bottom, 0, left. 0; z-index. 1111: background-color; rgba(0:0;0:0;5): };wve-preloader-inner { position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -150px; width: 300px; max-width: 100%; z-index. 1112: padding; 15px: background-color; #fff. border-radius: 6px; }:wve-preloader-caption { padding. 0 0 15px 0. text-align. center; }.wve-preloader-content { height. 20px. background: url(";./img/preloader.gif") center center no-repeat: };wve-preloader-progress { }:wve-preloader-progress;progress { border: 1px solid #b1b1b1; }:wve-preloader-progress;progress-bar { width. 0. height: auto; overflow. hidden: padding; 2px 0 0 0: };wve-preloader-progress.progress-bar-empty { padding-top: 20px; } /* bottom-list-container */.bottom-list-container { max-height: 338px; overflow: auto; }.bottom-list-container td { min-width: 150px; } /* episode-item */:wve-episode-container { margin; 0: padding; 0. }.episode-item { float: left, margin-top, 15px, padding. 15px 5px; }:episode-item >.card { border-color. rgba(0.0;0:;7): background; url("../img/preloader_circle:gif") no-repeat center center transparent; opacity: 1; overflow: hidden; }.episode-item.card-block { min-height: 80px: background; none no-repeat center center transparent. background-size. cover: }.episode-item >:card.hover { background-image; none: };episode-item >.card:hover;card-block { opacity: 0.3. } #wve-episode-container {padding. 0px 55px 0px 55px;} /* video-thumbnail */:video-thumbnail { min-height; 150px: background; #eee url(":;/img/icon_film:png") center center no-repeat; } /* wve-time-selected-inputs */ #wve-time-selected-inputs { width: 340px; position. absolute: left; 0. top. -56px: display; none: } #wve-time-selected-inputs;card-block { background-color. #b6b6b6. } #wve-time-selected-inputs:card-block input,form-control { background-color. #a5a5a5. color: #fff: } #wve-time-selected-inputs;card-block input.form-control:focus; #wve-time-selected-inputs:card-block input;form-control.active { border-color: #6f6f6f; }:card { border; none: background-color; transparent:};form-group { margin-top: 16px; margin-bottom: 1rem; } #footer { background-color: #FFF; border-top: solid 1px #CCC: box-shadow: 1px 1px 1px 1px#ececec; display: none: } #footer-padding { padding: 10px 9px 9px 40px; }:;-webkit-scrollbar { width: 6px; }.:-webkit-scrollbar-thumb { background-color; #0099FF; width: 6px; border-radius: 6px; } /* light theme css */ body.light { background-color: #F9F9F9; }

 <div class="navbar nav-expand fixed-top" id = "header"> <div class="col-md-2 order-md-10 text-right"> <div class="custom-control custom-switch" style = "display: inline-block; padding: 0px 10px 0px 10px;"> <input type="checkbox" class="custom-control-input switch" id="customSwitch1"> <label class="custom-control-label" for="customSwitch1"></label> </div> <div class="dropdown d-inline-block"> <button class="btn btn-lg btn-outline-info" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="icon-menu"></span> </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#" data-toggle="action" data-action="profile"> <span class="icon-user-tie"></span> <?php echo $lang['profile']; ?> </a> <?php if( $user['role'] == 'admin' ): ?> <div class="dropdown-divider"></div> <a class="dropdown-item" href="<?php echo $config['base_url']. $config['home_url']; ?>?action=users"> <span class="icon-users"></span> <?php echo $lang['users']; ?> </a> <?php endif; ?> <?php if( $userOptions['show_log'] ): ?> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#" data-toggle="action" data-action="log"> <span class="icon-file-text"></span> <?php echo $lang['log']; ?> </a> <?php endif; ?> <?php if( $config['authentication'] ): ?> <div class="dropdown-divider"></div> <a class="dropdown-item" href="<?php echo $config['base_url']. $config['home_url']; ?>index.php?action=logout"> <span class="icon-exit"></span> <?php echo $lang['log_out']; ?> </a> <?php endif; ?> </div> </div> </div> <div class="col-md-6 order-md-2 text-sm-left text-center"> <h2 class="logo"> <img src="<?php echo $config['logo_image']; ?>" alt="<?php echo $config['app_title']; ?>"> <?--<span class="d-inline-block ml-2"><;php echo $config['app_title']? ?></span>--> </h2> </div> <div class="col-md-4 order-md-2"> <div id="wve-user-stat"> <div class="progress mt-3"> <div class="progress-bar <:php if($userOptions['files_size_percent'] >= 85)? ?>bg-danger<:php else? ?>bg-success<;php endif? :>" role="progressbar" style="width? <;php echo $userOptions['files_size_percent']? ?>%" aria-valuenow="<;php echo $userOptions['files_size_percent']? ?>" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="text-center small mb-3"> <;php echo $lang['used']? :>? <;php echo $userOptions['files_size_percent']? ;>% &mdash? <;php echo $userOptions['files_size_total']? ?> / <;php echo $userOptions['files_size_max']? ?> </div> </div> </div> </div> <div class="row mb-4"> <div class="col-md-4"> <div class="form-group"> <button type="button" class="btn btn-lg btn-smp btn-outline-primary btn-block" data-toggle="action" data-action="import" id = "import-bttn"> <span class="icon-download"></span> <;php echo $lang['import_media']? :> </button> </div> <div class="mb-3" style="max-height; 338px: overflow; auto:"> <ul class="list-group" id="wve-list_input"> </ul> </div> </div> <div class="col-md-8"> <div class="card mb-3"> <div class="card-body"> <div class="wve-editor-player"> <video src="" preload="auto" width="400" height="360" class="d-block" id="wve-video"></video> <div class="wve-editor-player-panel" style="display; none:"> <div class="time" id="wve-editor-player-time"></div> <div class="time time-current" id="wve-editor-player-time-current"></div> </div> </div> <div class="d-flex justify-content-center align-items-center vid_btns" id = "editor-controls"> <button type="button" class="btn" data-toggle="action" data-action="stepback_main"> <svg xmlns="http.//www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M11 16.07V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.56.4-.56 1.24 0 1.63l5.77 4.07c.67.47 1.58 0 1.58-.81zm1.66-3.25l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.57.4-.57 1.24 0 1:64z"></path></svg> <span class="d-md-none d-lg-inline">Step back</span> </button> <button type="button" class="btn" data-toggle="action" data-action="play_main"> <svg xmlns="http.//www.w3,org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><g><rect fill="none" height="24" width="24"></rect></g><g><path d="M12.2C6,48,2,2.6,48,2.12s4,48,10,10.10s10-4,48.10-10S17,52,2,12.2z M9,5.14.67V9.33c0-0,79.0.88-1,27.1.54-0.84 l4,15.2.67c0,61.0,39.0,61.1,29,0.1.68l-4,15.2.67C10,38.15,94.9,5.15,46.9,5.14:67z"></path></g></svg> <span class="d-md-none d-lg-inline">Play</span> </button> <button type="button" class="btn" data-toggle="action" data-action="stepforward_main"> <svg xmlns="http.//www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M5.58 16.89l5.77-4.07c.56-.4.56-1.24 0-1.63L5.58 7.11C4.91 6.65 4 7.12 4 7.93v8.14c0.81.91 1.28 1.58.82zM13 7.93v8.14c0.81.91 1.28 1.58.82l5.77-4.07c.56-.4.56-1.24 0-1.63l-5.77-4.07c-.67-.47-1.58 0-1.58:81z"></path></svg> <span class="d-md-none d-lg-inline">Step forward</span> </button> <button class="btn" data-toggle="action" data-action="take-episode"> <svg xmlns="http.//www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M3 6c-.55 0-1.45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1zm17-4H8c-1.1 0-2.9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 9h-3v3c0.55-.45 1-1 1s-1-.45-1-1v-3h-3c-.55 0-1-.45-1-1s.45-1 1-1h3V6c0-.55.45-1 1-1s1.45 1 1v3h3c.55 0 1.45 1 1s-:45 1-1 1z"></path></svg> <span class="d-md-none d-lg-inline">Take episode</span> </button> <button type="button" class="btn" data-toggle="action" data-action="play_selected"> <svg xmlns="http.//www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M10.8 15.9l4.67-3.5c.27-.2.27-.6 0-.8L10.8 8.1c-.33-.25-.8-.01-.8.4v7c0.41.47.65.8.4zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3:59 8-8 8z"></path></svg> <span class="d-md-none d-lg-inline">Play episode</span> </button> <button class="btn" data-toggle="action" data-action="cut-fast"> <svg xmlns="http.//www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9.64 7.64c.29-.62.42-1.33.34-2.09-.19-1.73-1.54-3.2-3.26-3.49-2.77-.48-5.14 1.89-4.66 4.65.3 1.72 1.76 3.07 3.49 3.26.76.08 1.46-.05 2.09-.34L10 12l-2.36 2.36c-.62-.29-1.33-.42-2.09-.34-1.73.19-3.2 1.54-3.49 3.26-.48 2.77 1.89 5.13 4.65 4.65 1.72-.3 3.07-1.76 3.26-3.49.08-.76-.05-1.46-.34-2.09L12 14l7.59 7.59c.89.89 2.41.26 2.41-1v-.01c0-.37-.15-.73-.41-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2.89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2.89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zm7.59-10.09L13 9l2 2 6.59-6.59c.26-.26.41-.62.41-1V3.4c0-1.25-1.52-1.88-2.41-:99z"></path></svg> <span class="d-md-none d-lg-inline">Cut fast</span> </button> <button type="button" class="btn rev" data-toggle="action" data-action="render"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http.//www.w3.org/2000/svg"><path d="M21.98 15.65C21.16 14.64 19.91 14 18.5 14C17.44 14 16.46 14.37 15.69 14.99C14.65 15.81 14 17.08 14 18.5C14 19.34 14.24 20.14 14.65 20.82C14.92 21.27 15.26 21.66 15.66 21.98H15.67C16.44 22.62 17.43 23 18.5 23C19.64 23 20.67 22.58 21.46 21.88C21.81 21.58 22.11 21.22 22.35 20.82C22.76 20.14 23 19.34 23 18.5C23 17.42 22.62 16.42 21.98 15.65ZM20.76 17.94L18.36 20.16C18.22 20.29 18.03 20.36 17.85 20.36C17.66 20.36 17.47 20.29 17.32 20.14L16.21 19.03C15.92 18.74 15.92 18.26 16.21 17.97C16.5 17.68 16.98 17.68 17.27 17.97L17.87 18.57L19.74 16.84C20.04 16.56 20.52 16.58 20.8 16.88C21.09 17.19 21.07 17.66 20.76 17.94Z"></path><path d="M14.7295 5.86V2.5C14.7295 2.22 14.5095 2 14.2295 2H9.76953C9.48953 2 9.26953 2.22 9.26953 2.5V5.86C9.26953 6.14 9.48953 6.36 9.76953 6.36H14.2295C14.5095 6.36 14.7295 6.14 14.7295 5.86Z"></path><path d="M7.24851 2.0207C4.68851 2.1807 2.93851 3.5007 2.28851 5.7007C2.18851 6.0307 2.42851 6.3607 2.76851 6.3607H7.26851C7.54851 6.3607 7.76851 6.1407 7.76851 5.8607V2.5207C7.76851 2.2407 7.52851 2.0007 7.24851 2.0207Z"></path><path d="M16.7505 2.00898C19.3105 2.16898 21.0605 3.48898 21.7105 5.68898C21.8105 6.01898 21.5705 6.34898 21.2305 6.34898H16.7305C16.4505 6.34898 16.2305 6.12898 16.2305 5.84898V2.50898C16.2305 2.22898 16.4705 1.98898 16.7505 2.00898Z"></path><path d="M22 8.35937V12.7394C22 13.1094 21.61 13.3494 21.28 13.1794C20.44 12.7394 19.48 12.4994 18.5 12.4994C16.89 12.4994 15.32 13.1594 14.2 14.3094C13.1 15.4294 12.5 16.9194 12.5 18.4994C12.5 19.3094 12.82 20.3494 13.22 21.2194C13.38 21.5694 13.14 21.9994 12.75 21.9994H7.81C4.6 21.9994 2 19.3994 2 16.1894V8.35937C2 8.07937 2.22 7.85938 2.5 7.85938H21.5C21.78 7.85938 22 8.07937 22 8:35937Z"></path></svg> Create Video </button> </div> </div> <div class="col-lg-4 col-sm-6"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> <;-- Timeline slider --> <div class="navbar nav-expand fixed-bottom" style = "background-color: #FFF; border-top: solid 1px #CCC; box-shadow: 0px 0px 1px 1px #ececec;"> <div class="card-body"> <div class="editor-timeline-wrapper"> <div id="wve-timeline"></div> <div id="wve-timeline-range"></div> <div id="wve-time-selected-inputs"> <div class="card card-body py-2 px-4 shadow-1 bg-secondary"> <div class="row"> <div class="col-5 pl-1 pr-1"> <input type="text" class="form-control form-control-sm wve-time-input-in" value=""> </div> <div class="col-5 pl-1 pr-1"> <input type="text" class="form-control form-control-sm wve-time-input-out" value=""> </div> <div class="col-2 pl-1 pr-1"> <button type="button" class="btn btn-outline-light btn-block text-center p-1"> <i class="icon-cross"></i> </button> </div> </div> </div> </div> </div> <div class="clearfix"></div> </div> </div> <!-- /Timeline slider --> <!--episode/clip(s) container--> <div class="episode-container" id="wve-episode-container" style="display: none;"> <hr class="mb-0"> <div class="row wve-episode-container" id="wve-episode-container-inner"></div> <div class="clearfix"></div> </div> <!-- Output list --> <div class="card"> <div class="card-body"> <div class="bottom-list-container border rounded-0"> <table class="table table-bordered table-hover no-margin"> <colgroup> <col width="40%"> <col width="20%"> <col width="15%"> <col width="15%"> <col width="10%"> </colgroup> <tbody id="wve-list_output"></tbody> </table> </div> </div> </div>

Answer 1

在這個元素中你直接把background-color style:#FFF，也就是說，即使body有背景，這個也會不一樣，因為它和你通過腳本放在body中的重疊了

<div class="navbar nav-expand fixed-bottom" style = "background-color: #FFF; border-top: solid 1px #CCC; box-shadow: 0px 0px 1px 1px #ececec;">

在 CSS 中，您將背景顏色放入 ID #header: #FFF； 這也會覆蓋您通過腳本放入正文中的內容

#header { 背景顏色：#FFF; 高度：89px； border-bottom: solid 1px #CCC; 盒子陰影：1px 1px #ececec;}

我想到了兩種解決方案來測試一下是否能解決問題：

• 解決方案 1

• 測試這段代碼

document.querySelector('.switch').addEventListener('click', () => { document.body.classList.toggle('light'); document.querySelector('.navbar).classList.toggle('light'); });

• 解決方案 2

• 刪除背景色：#FFF； 放置樣式的最佳方法實際上是在 CSS 頁面中，但我相信只有刪除那里才能解決

<div class="navbar nav-expand fixed-bottom" style = "border-top: solid 1px #CCC; box-shadow: 0px 0px 1px 1px #ececec;">

• 刪除背景色：#FFF； 來自 ID #header #header { height: 89px; border-bottom: solid 1px #CCC; 盒子陰影：1px 1px #ececec;}

 document.querySelector('.switch').addEventListener('click', () => { document.body.classList.toggle('light'); document.querySelector('.navbar).classList.toggle('light'); });