One way to display a div's inner HTML as its background is to apply a CSS rule

Question

One way to display a div's inner HTML as its background is to apply a CSS rule

Help needed!

<div class="container">red</div>
<div class="container">green</div>
<div class="container">#eeeeee</div>

I am trying to dynamically set background colors for multiple divs based on their inner HTML content. For example, I want the background color of the first div to be red and the second div to be green, and so on.

Since I have over 50 div elements, writing individual CSS rules for each one would be too cumbersome. As a beginner in JavaScript, is there a way to achieve this with just a few lines of code?

javascript html css

Answer 1

Answer №1

To achieve this effect, you can utilize the css() method:

$('div.container').css('background-color', function() {
    return $(this).text();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">blue</div>
<div class="container">yellow</div>
<div class="container">#cccccc</div>

For a vanilla JavaScript alternative:

var elements = document.querySelectorAll('div.container');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = elements[i].innerText;
}

Answer 2

To achieve this effect, you can utilize the css() method:

$('div.container').css('background-color', function() {
    return $(this).text();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">blue</div>
<div class="container">yellow</div>
<div class="container">#cccccc</div>

For a vanilla JavaScript alternative:

var elements = document.querySelectorAll('div.container');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = elements[i].innerText;
}

Answer 3

Answer №2

Here is a solution that should meet your needs...

Using jQuery

$('.box').each(function(){
    $(this).css('background', $(this).text());
});

With vanilla JavaScript

var boxes = document.querySelectorAll('.box');
for (var j = 0; j < boxes.length; j++) 
{
  boxes[j].style.backgroundColor = boxes[j].innerText;
}

Answer 4

Here is a solution that should meet your needs...

Using jQuery

$('.box').each(function(){
    $(this).css('background', $(this).text());
});

With vanilla JavaScript

var boxes = document.querySelectorAll('.box');
for (var j = 0; j < boxes.length; j++) 
{
  boxes[j].style.backgroundColor = boxes[j].innerText;
}

Answer 5

Answer №3

Let this solution brighten your day :)

$(".container").each(function (){
    $(this).css('background', $(this).text());
});

Update inspired by your feedback

A Vanilla JavaScript alternative:

If you're creating a website for up-to-date browsers, consider using querySelectorAll.

var containers = document.querySelectorAll('.container');
for(var i=0;i<containers.length;i++){
   containers[i].style.background = containers[i].innerHTML;
}

Alternatively, use this function for outdated browsers.

function getElementsByClassName(cn, rootNode) {
    if (!rootNode) {
        rootNode = document;
    } 
    for (var r=[], e=rootNode.getElementsByTagName('*'), i=e.length; i--;) {
        if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) {
          r.push(e[i]); 
        }
    }
    return r;  
}

var containers = getElementsByClassName('container');
for(var i=0;i<containers.length;i++){
   containers[i].style.background = containers[i].innerHTML;
}

Answer 6

Let this solution brighten your day :)

$(".container").each(function (){
    $(this).css('background', $(this).text());
});

Update inspired by your feedback

A Vanilla JavaScript alternative:

If you're creating a website for up-to-date browsers, consider using querySelectorAll.

var containers = document.querySelectorAll('.container');
for(var i=0;i<containers.length;i++){
   containers[i].style.background = containers[i].innerHTML;
}

Alternatively, use this function for outdated browsers.

function getElementsByClassName(cn, rootNode) {
    if (!rootNode) {
        rootNode = document;
    } 
    for (var r=[], e=rootNode.getElementsByTagName('*'), i=e.length; i--;) {
        if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) {
          r.push(e[i]); 
        }
    }
    return r;  
}

var containers = getElementsByClassName('container');
for(var i=0;i<containers.length;i++){
   containers[i].style.background = containers[i].innerHTML;
}

Answer 7

Answer №4

To implement this functionality, you can utilize the each function in jQuery

$('.container').each(function(){
    var color = $(this).text();
    $(this).css('background',color)
})

.container{
    width:100px;
    height:100px;
    display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">red</div>
<div class="container">green</div>
<div class="container">#eeeeee</div>

Answer 8

To implement this functionality, you can utilize the each function in jQuery

$('.container').each(function(){
    var color = $(this).text();
    $(this).css('background',color)
})

.container{
    width:100px;
    height:100px;
    display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">red</div>
<div class="container">green</div>
<div class="container">#eeeeee</div>

One way to display a div's inner HTML as its background is to apply a CSS rule

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Exploring Next.js: Leveraging fetch to retrieve data in getServerSideProps and passing it to the client via query parameters

Believing that members possess a certain role when they actually do not

The radio button is not appearing correctly in my HTML form

Resolved: Angular JS resolves circular dependencies

Unable to change placeholder in Material UI's Select Form

Styling in sass gets even more powerful when using custom selectors that are

implement django self,pk post-save success function

Access a portion of a file located on a distant server

Manipulating the Datepicker onChangeMonthYear event in Jquery UI

What is the highest value that AutoCompleteExtender can reach?

Line divider immediately following the title on the same row

Updating parent array values within child components in React

Real-time data updates on an Express website using Node.js

Upon running `npm start`, an unexpected token error arises in the file originating from a local

What is the best way to add a textfield within an image?

Angular unable to find a route for external links

How to turn off spin buttons for input type=“number” in AngularJS when using webkit

View a specific selected newsAPI article on its own dedicated page

Inconsistency in width of Bootstrap 4 card layouts

I am attempting to extract text from an element, but instead of the text, I received a value and am unable to click on it. This particular element is a dropdown button in a Selenium test, with