Saving multiple css values to one javascript variable using strings

Question

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.

Your code has several syntax errors. Suggest you mend those first (look at the console in the codepen). — A Haworth, Nov 23 '21 at 15:38

Raimond · Accepted Answer · 2021-11-24T11:05:10.863

0

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.

In the Header add the following code for JQuery to work:

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

Then just do this in body.

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.

edited Nov 24 '21 at 11:05

answered Nov 23 '21 at 14:10

Raimond

31
2

Thanks for your suggestion and tips. Yeah I have been going that route as I've been following the Smilga vanilla Java projects. Only thing is that when you start changing multiple classes it gets a bit hard to keep track of everything you need to change! I've not used JQuery before, would that code work in a standard .js file? – Lauro235 Nov 23 '21 at 18:19
You would need to import JQuery Library in your header of HTML and then run then add the functions after your HTML. I'll add this to the response as it gives more space. – Raimond Nov 24 '21 at 11:02
Thanks for the tip. – Lauro235 Nov 25 '21 at 20:24

namlem4u · Answer 2 · 2021-11-23T15:46:46.343

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>

Thanks for your suggestion and tips. I'm glad you told me how much slower js is compared to CSS. Browser relies on your cpu if I remember correctly and css relies on gpu which is more focused and speedy, but less flexible. — Lauro235, Nov 23 '21 at 18:18

Saving multiple css values to one javascript variable using strings

2 Answers2