Modify a variety of CSS styles based on boolean values

Question

Modify a variety of CSS styles based on boolean values

I am currently working on a web page that needs to adapt based on the local time of the user. Depending on whether it's morning, afternoon, or evening, I want the background image and color scheme to change accordingly. I have made some progress using document.getElementById();, but individual changes for each element are proving to be too time-consuming.

I've been wondering if there is a more efficient way to apply multiple CSS rules based on boolean conditions. I tried searching for something like @input css, but my search didn't yield any useful results.

Edit: To clarify, what I'm looking for is a concise method to adjust various CSS properties in different divs and IDs dynamically. For instance, changing the color: of #messagebased on the time of day.

javascript html css

Answer 1

Answer №1

By using JavaScript, you have the ability to assign various classes to your body element based on the time of day. These classes can then be utilized to style other elements on your webpage.

const hour = new Date().getHours();

let className = 'morning';

if (hour > 21) {
  className = 'night';
} else if (hour > 18) {
  className = 'evening';
} else if (hour > 12) {
  className = 'afternoon';
}

document.body.classList.add(className);

.bg {
  background: red;
  color: white;
}

.night .bg {
  background: black;
}

.evening .bg {
  background: orange;
}

.afternoon .bg {
  background: yellow;
}

.morning .bg {
  background: green;
}

<html>
<head>
</head>
<body>
  <div class="bg">
    <p>Lorem ipsum...</p>
  </div>
</body>
</html>

Answer 2

By using JavaScript, you have the ability to assign various classes to your body element based on the time of day. These classes can then be utilized to style other elements on your webpage.

const hour = new Date().getHours();

let className = 'morning';

if (hour > 21) {
  className = 'night';
} else if (hour > 18) {
  className = 'evening';
} else if (hour > 12) {
  className = 'afternoon';
}

document.body.classList.add(className);

.bg {
  background: red;
  color: white;
}

.night .bg {
  background: black;
}

.evening .bg {
  background: orange;
}

.afternoon .bg {
  background: yellow;
}

.morning .bg {
  background: green;
}

<html>
<head>
</head>
<body>
  <div class="bg">
    <p>Lorem ipsum...</p>
  </div>
</body>
</html>

Modify a variety of CSS styles based on boolean values

Answer №1

Similar questions

Obtain the value of "data-something" attribute from an <option> element within a <select> element

npm installation for phonegap failed due to shasum check discrepancy

New ways to update Vue.js data without the need to bind HTML to methods

Strategies for selecting elements in jQuery that are displayed and not hidden

Exploring the world of DOM manipulation in AJAX websites?

Searching for columns should be at the top of an angular datatable, not at the bottom

Error with JavaScript slideshow The slideshow using JavaScript seems to

What is the technique for creating a repeating image rather than stretching it?

How can the marionette controller object generate unique prototype methods that are dynamic?

Interactive React Dropdown Component

Ways to verify that express middleware triggers an error when calling next(error)

Adding Firebase Authentication to my AngularJS website

Eliminate the initial item in each list item

A guide to utilizing CSS to showcase the content of all four div elements in HTML body simultaneously

Tips for Creating a Fixed-Width Element

Icon fonts are not compatible with AngularJS, causing difficulties in their usage together

Why is my main.scss having trouble importing other files?

How to dynamically alter a PHP variable using a JavaScript button click on the existing webpage

Stop receiving notifications for channel events in Stream with the GetStream.io Chat API

Is the ng-style not displaying the background image with the interpolated value?