Modify the background of a div according to the size of the screen. Implement this functionality using JavaScript and

Question

Modify the background of a div according to the size of the screen. Implement this functionality using JavaScript and

After reviewing a specific post at , I find myself unsure of how to target a particular class for reference.

I am certain that I want to implement

document.onload = checkWidth();

window.onresize = checkWidth();

However, I am uncertain about the procedure to change the background of a div based on the screen size of the device or the current browser window size. Here is my current setup, with Bootstrap being used for CSS

<div class="row">
 <div class="col-sm-6 background1 border-design">
  <p>Placeholder</p>
 </div>
</div>

regarding CSS

.background1 {
 background: linear-gradient(100deg, #87CEFA 0%, #FF8C00 100%);
}
.background2 {
  background: linear-gradient(100deg, #FF8C00 0%, #C0C0C0 100%);
}

Suppose I want the background to switch to .background1 when the browser window size is ≥576px (due to using col-sm-6), but switch to a different style, like .background2, when the browser window size is less than or equal to 576px.

javascript html css

Answer 1

Answer №1

The class property named classList contains the classes assigned to a specific DOM element. These classes can be manipulated based on the screen size requirements.

Below is one suggested way to implement this:

<div class="row">
 <div id="to-change" class="col-sm-6 background1 border-design">
  <p>Content Placeholder</p>
 </div>
</div>

For the JavaScript part, the code could be:

window.onresize.apply(updateBackground);

function updateBackground(){
    let window_width = window.innerWidth;
    if (window_width >= 576) document.getElementById("to-change").classList.remove("background1").add("background2");
    else document.getElementById("to-change").classList.remove("background2").add("background1");
}

Answer 2

The class property named classList contains the classes assigned to a specific DOM element. These classes can be manipulated based on the screen size requirements.

Below is one suggested way to implement this:

<div class="row">
 <div id="to-change" class="col-sm-6 background1 border-design">
  <p>Content Placeholder</p>
 </div>
</div>

For the JavaScript part, the code could be:

window.onresize.apply(updateBackground);

function updateBackground(){
    let window_width = window.innerWidth;
    if (window_width >= 576) document.getElementById("to-change").classList.remove("background1").add("background2");
    else document.getElementById("to-change").classList.remove("background2").add("background1");
}

Answer 3

Answer №2

1) The function checkWidth does not need to be called explicitly, as JS will automatically call it when needed. Just pass the reference to it.

2) To add or remove a class on an HTML element, you can use either the add or remove method of the classList.

container.classList.remove("background1");
container.classList.add("background2");

const container = document.querySelector(".bg-container");

function checkWidth() {
  if (window.innerWidth < 600) {
    container.classList.remove("background1");
    container.classList.add("background2");
  } else {
    container.classList.add("background1");
    container.classList.remove("background2");
  }
}

document.onload = checkWidth;
window.onresize = checkWidth;

.background1 {
  background: linear-gradient(100deg, #87CEFA 0%, #FF8C00 100%);
}

.background2 {
  background: linear-gradient(100deg, #FF8C00 0%, #C0C0C0 100%);
}

.bg-container {
  padding: 1.5rem;
}

<div class="row">
  <div class="bg-container col-sm-6 background1 border-design">
    <p>Placeholder</p>
  </div>
</div>

Answer 4

1) The function checkWidth does not need to be called explicitly, as JS will automatically call it when needed. Just pass the reference to it.

2) To add or remove a class on an HTML element, you can use either the add or remove method of the classList.

container.classList.remove("background1");
container.classList.add("background2");

const container = document.querySelector(".bg-container");

function checkWidth() {
  if (window.innerWidth < 600) {
    container.classList.remove("background1");
    container.classList.add("background2");
  } else {
    container.classList.add("background1");
    container.classList.remove("background2");
  }
}

document.onload = checkWidth;
window.onresize = checkWidth;

.background1 {
  background: linear-gradient(100deg, #87CEFA 0%, #FF8C00 100%);
}

.background2 {
  background: linear-gradient(100deg, #FF8C00 0%, #C0C0C0 100%);
}

.bg-container {
  padding: 1.5rem;
}

<div class="row">
  <div class="bg-container col-sm-6 background1 border-design">
    <p>Placeholder</p>
  </div>
</div>

Answer 5

Answer №3

You can achieve this with pure CSS

    .background1{
    background-color: red;
    }
    @media screen and (max-width: 768px)
    {
     .background1
     {
       background-color: green;
       color:white;
     }
    }

<div class="row">
 <div id="to-modify" class="col-sm-6 background1 border-design">
  <p>Placeholder</p>
 </div>
</div>

Answer 6

You can achieve this with pure CSS

    .background1{
    background-color: red;
    }
    @media screen and (max-width: 768px)
    {
     .background1
     {
       background-color: green;
       color:white;
     }
    }

<div class="row">
 <div id="to-modify" class="col-sm-6 background1 border-design">
  <p>Placeholder</p>
 </div>
</div>

Modify the background of a div according to the size of the screen. Implement this functionality using JavaScript and

Answer №1

Answer №2

Answer №3

You can achieve this with pure CSS

Similar questions

Bring life to the process of adding and removing DOM elements through animation

I am having issues with my bootstrap navigation pills, they seem to be malfunctioning

Tips for maintaining consistent styles in CSS for multiple websites

How to Upload Your Avatar Image with the Stream-Chat API from GetStream.io

Excessive Font Awesome Icons causing navigation bar to appear oversized

Show the profile picture of a model in a Django template

`Scrolling through a horizontal menu with no scrollbar present`

Utilizing CSS Grid to dynamically stretch and wrap rows based on adjacent siblings within a flat DOM structure

Is it possible to prevent the fade out of the image when hovering over the text after hovering over the div or image, causing the text to fade in?

Dismiss Bootstrap by clicking anywhere

Error alert: $.simpleWeather function not found

Tips for looping through the new element that has been added to an array from the database query result

Generate an array consisting of characters within a designated range

Retrieve the count of ng-if directives that match a specific ng-repeat content

There is an issue with the functionality of Java code that has been adapted from Javascript logic

Check if a value is present in the array with *ngIf

Can I initiate an AJAX call from a different JSP page?

If a radio button is either selected or deselected, a jQuery alert will display the value of the radio button

The navigation bar text spills over the designated area

What are the best practices for utilizing pre-defined CSS classes in Vue.js libraries?