我對 JavaScript 很陌生，所以請耐心等待。我在這里閱讀了一些主題
如何在 JavaScript 中設定多個 CSS 樣式？
使用 JavaScript 按字串設定 CSS 屬性
第一個鏈接讓我很興奮，因為您似乎可以將多個 css 規則和值保存為一個字串，然后可以替換現有的 css 值。考慮到這一點，我在下面的鏈接上試了一下。
https://codepen.io/Laurie312/pen/JjyqZLO
CSS
nav {
width: 100vw;
height: 200px;
overflow: hidden;
z-index: 1;
outline: none;
background-color: red
}
JavaScript
const button = document.getElementByTagName('button')
const navBar = document.getElementByTagName('nav')
const nav1Settings = '\n\t\twidth: 100vw;\n\t\theight: 200px;\n\t\toverflow: hidden;\n\t\tz-index: 1;\n\t\toutline: none;\n\t\tbackground-color: red;\n\t'
const nav2Settings = '\n\t\theight: 400px;\n\t\tz-index: 0;\n\t\toutline: 2px solid var(--var-light-1)\n\t'
button.addEventListener('click', function()) {
if (navBar.contains(nav1Settings)) {
navBar.toggle(nav2Settings)
}
}
VSCode 編輯器似乎比 codepen 編輯器使用更少的選項卡。這是否對我的轉義序列起作用？任何人都可以開始為我指出讓這段代碼作業的更好方向嗎？
我知道我還沒有接近現實世界的使用。我想這是朝著那個方向邁出的一步，雖然我絕對接受在提出這個問題之前我應該??更好地理解其他事情，但我很感激所有的建議和建議。
uj5u.com熱心網友回復：
只需在 CSS 中構建類并使用 javascript 或 jquery 在單擊時應用該類。這是一個關于如何應用和洗掉類的快速 JQuery 示例。
const button = document.getElementByTagName('button')
$( document ).on("click", button, function(){
if ( $(" #navBar ").hasClass(" classOne ") ) {
$(" #navBar ").removeClass(" classOne ");
$(" #navBar ").addClass(" classTwo ");
} else {
$(" #navBar ").addClass(" classOne ");
$(" #navBar ").removeClass(" classTwo ");
}
});
同樣在使類添加 !important 引數時，以便覆寫任何其他值。
PS我不完全確定順序，但我相信你應該使用\n\r\t\t。\n - 換行，\r - 回傳。不同的軟體可以理解其中之一、其他或兩者。
uj5u.com熱心網友回復：
JavaCript 不能替代 CSS。速度，性能不快 css。您在 css 檔案或 css internal 中創建 1 個類，然后在 Element 中應用類 css。toggle如果存在，屬性將洗掉 DOM 元素中的類，否則toggle將在 DOM 元素中添加類。對不起，我不知道在線編輯器。我首先在線使用編輯器，因為我不知道格式代碼示例：
var btnElement = document.querySelector('button');
var boxElement= document.querySelector('.color-change')
btnElement.onclick = function () {
boxElement.classList.toggle('red')
}.color-change{
width: 100px;
height: 100px;
background-color: black;
margin-bottom: 30px;
}
.red{
background-color: red;
}
<div class="color-change"></div>
<button >Change color</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/363931.html
標籤：javascript html css 细绳 逃跑