Inspecting CSS values through Javascript is an important aspect of front

Question

Inspecting CSS values through Javascript is an important aspect of front

How can I create a JavaScript function that checks my CSS code and changes the background color to #29fd53 if it is currently #222327? Likewise, how do I make it switch back to #222327 if the current background color is #29fd53?

This is my JavaScript code:

function changeBgC(){
var body = document.getElementsByTagName("body")[0];

var computedStyle = window.getComputedStyle(body)

var bodyBackgroundValue = computedStyle.getPropertyValue("background-color")
console.log(bodyBackgroundValue);
if (bodyBackgroundValue == "#222327") {
    document.querySelector('body').style.backgroundColor = "#29fd53"
  } else {
    document.querySelector('body').style.backgroundColor = "#222327"
  }
}

.body{
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background: #222327;
}

<div class="box">
<button onclick="changeBgC()" class="menuButton">≣</button>
</div>

I tried using i++ in my code (by adding an onclick event in my HTML) but it only changes the background color to #29fd53. Pressing the button again doesn't trigger any change.

Here's what I attempted:

function changeBgC(){
    var i = 0
    if (i % 2 === 0){
        document.querySelector('.body').style.backgroundColor = "#29fd53"
        console.log(i);
        i+=1
    }else{
        document.querySelector('.body').style.backgroundColor = "#222327"
        i+=1
    }
}

javascript html css

Answer 1

Answer №1

The issue is with how you've defined the i variable within the function scope. Each time changeBgC() is called, it resets i to 0.

To fix this, declare i outside the function so that its value persists between function calls.

let i = 0;
function changeBgC(){
    if (i % 2 === 0){
        document.querySelector('.body').style.backgroundColor = "#29fd53";
        console.log(i);
        i+=1;
    }else{
        document.querySelector('.body').style.backgroundColor = "#222327";
        i+=1;
    }
}

Answer 2

The issue is with how you've defined the i variable within the function scope. Each time changeBgC() is called, it resets i to 0.

To fix this, declare i outside the function so that its value persists between function calls.

let i = 0;
function changeBgC(){
    if (i % 2 === 0){
        document.querySelector('.body').style.backgroundColor = "#29fd53";
        console.log(i);
        i+=1;
    }else{
        document.querySelector('.body').style.backgroundColor = "#222327";
        i+=1;
    }
}

Answer 3

Answer №2

To achieve this, consider using a class in place of a function. This allows for encapsulation of the i variable. Private members (#) were utilized within the class since they are not needed outside of it.

class background {

#i=0;
#elem=document.body.style;

change() {
  this.#i=!this.#i;
  this.#elem.backgroundColor = this.#i?"#29fd53":"#222327";
 }
}

bkg=new background();

.body{
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background: #222327;
}

<div class="box">
<button onclick="bkg.change();" class="menuButton">≣</button>
</div>

Answer 4

To achieve this, consider using a class in place of a function. This allows for encapsulation of the i variable. Private members (#) were utilized within the class since they are not needed outside of it.

class background {

#i=0;
#elem=document.body.style;

change() {
  this.#i=!this.#i;
  this.#elem.backgroundColor = this.#i?"#29fd53":"#222327";
 }
}

bkg=new background();

.body{
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background: #222327;
}

<div class="box">
<button onclick="bkg.change();" class="menuButton">≣</button>
</div>

Answer 5

Answer №3

As previously mentioned by @Teemu, the getComputedStyle() function returns an rgb() value. To obtain the HEX code, you can utilize a CSS variable instead of creating a conversion function from RGB to HEX.

The trim function is utilized to eliminate trailing spaces.

function changeBgC(){
  let bgColor = getComputedStyle(document.body).getPropertyValue('--bg-color').trim();
  if(bgColor == "#222327"){
    document.body.style.setProperty('--bg-color', '#29fd53');
  } else {
    document.body.style.setProperty('--bg-color', '#222327');
  }
}

body{
   --bg-color: #222327;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background-color: var(--bg-color);
}

<div class="box">
  <button onclick="changeBgC()" class="menuButton">≣</button>
</div>

Answer 6

As previously mentioned by @Teemu, the getComputedStyle() function returns an rgb() value. To obtain the HEX code, you can utilize a CSS variable instead of creating a conversion function from RGB to HEX.

The trim function is utilized to eliminate trailing spaces.

function changeBgC(){
  let bgColor = getComputedStyle(document.body).getPropertyValue('--bg-color').trim();
  if(bgColor == "#222327"){
    document.body.style.setProperty('--bg-color', '#29fd53');
  } else {
    document.body.style.setProperty('--bg-color', '#222327');
  }
}

body{
   --bg-color: #222327;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background-color: var(--bg-color);
}

<div class="box">
  <button onclick="changeBgC()" class="menuButton">≣</button>
</div>

Answer 7

Answer №4

To optimize performance and simplify maintenance, it's recommended to avoid using JavaScript for directly altering element styles when switching themes.

Instead, a more efficient solution is to utilize CSS variables for theme changes, offering benefits such as enhanced performance, ease of maintenance, and increased flexibility.

Here's how you can implement CSS variables to toggle between light and dark themes:

Utilize CSS variables for color adjustments:

.theme-light {
  --bg-primary: #29fd53;
}

.theme-dark {
  --bg-primary: #222327;
}

body {
  background: var(--bg-primary);
}

Switching between different themes:

function switchTheme() {
    let themes = ['theme-light', 'theme-dark'];
    let currentTheme = [...document.body.classList].find(c => themes.includes(c)) ?? themes[0]
    let nextTheme = themes[themes.indexOf(currentTheme)+1] ?? themes[0]
    document.body.classList.remove(...themes) // removes all theme classes, including the current one
    document.body.classList.add(nextTheme)
}

Include the HTML snippet:

<div class="box">
  <button onclick="switchTheme()" class="menuButton">≣</button>
</div>

Ensure to set an initial body class with one of the theme options:

<body class="theme-light">

<body class="theme-dark">

Answer 8

To optimize performance and simplify maintenance, it's recommended to avoid using JavaScript for directly altering element styles when switching themes.

Instead, a more efficient solution is to utilize CSS variables for theme changes, offering benefits such as enhanced performance, ease of maintenance, and increased flexibility.

Here's how you can implement CSS variables to toggle between light and dark themes:

Utilize CSS variables for color adjustments:

.theme-light {
  --bg-primary: #29fd53;
}

.theme-dark {
  --bg-primary: #222327;
}

body {
  background: var(--bg-primary);
}

Switching between different themes:

function switchTheme() {
    let themes = ['theme-light', 'theme-dark'];
    let currentTheme = [...document.body.classList].find(c => themes.includes(c)) ?? themes[0]
    let nextTheme = themes[themes.indexOf(currentTheme)+1] ?? themes[0]
    document.body.classList.remove(...themes) // removes all theme classes, including the current one
    document.body.classList.add(nextTheme)
}

Include the HTML snippet:

<div class="box">
  <button onclick="switchTheme()" class="menuButton">≣</button>
</div>

Ensure to set an initial body class with one of the theme options:

<body class="theme-light">

<body class="theme-dark">

Inspecting CSS values through Javascript is an important aspect of front

Answer №1

Answer №2

Answer №3

Answer №4

To optimize performance and simplify maintenance, it's recommended to avoid using JavaScript for directly altering element styles when switching themes.

Similar questions

Why Form Validation in JavaScript is Failing to Display Alerts or Update Input Background Colors

Customize bootstrap cards to have a full height and add a bottom margin to enhance the

How can I retrieve the current value of a text element using jQuery?

Are Css3 Transition and Transform properties dysfunctional in older versions of IE?

The issue arises when attempting to use Bootstrap date and time components simultaneously

Tips for customizing the Bootstrap 4 grid system for a seamless mobile viewing experience

Creating multiple divs with input fields dynamically using JavaScript is a useful skill to have

Tips for adding an asterisk to the label of a Material-UI switch component

Tips for structuring route dependencies in Node.js and Express

Increase the size of the parent div as the height of the position:absolute child div grows

Combining numerous arrays of objects by a specific key

Error: Unable to access the property '_locals' of an undefined value

An error occurred with the authorization headers when attempting to retrieve the requested JSON

Experience a seamless transition to the next section with just one scroll, allowing for a full

How can I efficiently update Vue data externally?

Utilizing clip-path polygons for effective styling on Firefox and iOS

A comprehensive guide to using Reactive Forms in Angular

JSON parsing throws an error due to encountering an 'unexpected end of input' issue

Error: The filter argument must be in object form

`Enhancing the appearance of code in PHP`