I'm quite new to JavaScript so do bear with me. I've read a few threads here

How can I set multiple CSS styles in JavaScript?

Set CSS Property by string with JavaScript

The first link excited me, because it seems that you can save multiple css rules and values as a string which can then replace existing css values. With that in mind I gave it a go on the link below.

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 editor seems to use less tabs than codepen editor. Is this working against my escape sequence? Can anyone begin to point me in a better direction for getting this code to work?

I know I'm still not anywhere near real world usage. I guess this is a step toward that, although I absolutely accept there might be other things I should understand better before asking this question, I'm grateful for all advice and suggestions.

CodePudding user response：

Just construct the class in CSS and use javascript or jquery to apply that class on click. Here's a quick JQuery example on how to apply and remove class.

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 ");
  }
});

Also when making the class add !important arguments, so that any other values get overridden.

P.S I'm not entirely sure on the sequence, but you should, I believe, use \n\r\t\t. \n - New Line, \r - Return. Different software understands one, other or both.

CodePudding user response：

JavaCript not replace CSS. speed, performance not fast css. you create 1 class in css file or css internal and then apply class css in Element. Properties toggle will remove class in DOM Element if it exists, else toggle will add class in DOM Element. I'm sory i don't know editor online. i'm firt use editor online because i'm don't know format code Example:

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>