How to use JavaScript with HTML to change the background of a specific <div> based on a color <input&gt

admin管理员组

文章数量:1389768

Q: I am trying to specifically change a div to a chosen color, and not the entire body through JS

When using JS to utilize an input and change the background depending on a user-decided color, the only line of code I see/can get working is document.body.style.backgroundColor = color;

Is there a way to do, say, document.(classNameForADiv).style.backgroundColor = color;? I'm very new to HTML, CSS, and JS so any advice would be appreciated.

HTML:

         <div class="cell text">
            Background Color Picker:
        </div>
        <div class="cell js">
            <input type="color" id="color_value" name="color_value" value="Black">
            <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
            <button class="button two" type="button" onclick="changeBackground()">
                Set Color:
            </button>
        </div>

JS:

function changeBackground(){
  let color = document.getElementById('color_value').value;
  document.body.style.backgroundColor = color;
}

This changes the background of the entire Body tag, whereas I'm looking for a solution to change the background of a Div tag.

Q: I am trying to specifically change a div to a chosen color, and not the entire body through JS

When using JS to utilize an input and change the background depending on a user-decided color, the only line of code I see/can get working is document.body.style.backgroundColor = color;

Is there a way to do, say, document.(classNameForADiv).style.backgroundColor = color;? I'm very new to HTML, CSS, and JS so any advice would be appreciated.

HTML:

         <div class="cell text">
            Background Color Picker:
        </div>
        <div class="cell js">
            <input type="color" id="color_value" name="color_value" value="Black">
            <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
            <button class="button two" type="button" onclick="changeBackground()">
                Set Color:
            </button>
        </div>

JS:

function changeBackground(){
  let color = document.getElementById('color_value').value;
  document.body.style.backgroundColor = color;
}

This changes the background of the entire Body tag, whereas I'm looking for a solution to change the background of a Div tag.

• javascript
• html
• css

Share Improve this question Follow edited Feb 26, 2022 at 7:44 Youssouf Oumar 46.6k1616 gold badges103103 silver badges105105 bronze badges asked Feb 26, 2022 at 7:18 MatbartMatbart 6355 bronze badges 4

• If there are any duplicates that I may have missed while I was checking for similar questions, please direct me! – Matbart Commented Feb 26, 2022 at 7:19
• 2 get the div (using div = document.getElementById('someid'), or maybe div = document.querySelector('some selector'), etc etc) ... then div.style.backgroundColor = color - no idea which div you want to do this on, but the code should help – Bravo Commented Feb 26, 2022 at 7:20
• 1 In addition, I think that taking a look at a tutorial about dom manipulation with js could help you. w3schools./js/js_htmldom.asp this is a nice resource – Sandil Ranasinghe Commented Feb 26, 2022 at 7:28
• Edit: With the help of the other ments I've figured out what you meant, this has been incredibly helpful. Thanks everyone. – Matbart Commented Feb 26, 2022 at 7:34

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 1

You have to pick specific division for change division color.

function changeBackground(){
  let color = document.getElementById('color_value').value;
  let division = document.getElementById("cell_text");
  division.style.backgroundColor = color;
}

<div class="cell text" id = "cell_text">
    Background Color Picker:
</div>
<br>
<div class="cell js">
   <input type="color" id="color_value" name="color_value" value="Black">
   <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
   <button class="button two" type="button" onclick="changeBackground()">
        Set Color:
   </button>
</div>

change the color of div tag only. (document.getElementById("myDiv").style.backgroundColor);

Please check Updated your code

function changeBackground(){
let color = document.getElementById('color_value').value;
document.getElementById('color-box').style.backgroundColor = color;
}

 <div class="cell text">
            Background Color Picker:
        </div>
        <div class="cell js">
            <input type="color" id="color_value" name="color_value" value="Black">
            <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
            <button class="button two" type="button" onclick="changeBackground()">
                Set Color:
            </button>
        </div>
        
        <div id="color-box">
        THis is color box
        </div>

Then you have the specify the target div. I put below a div with ID output. That would change the color only in the div.

function changeBackground(){
  
  let color = document.getElementById('color_value').value;  
  document.getElementById('output').style.backgroundColor = color;
}

#output {
  height:200px;
  width:200px;
}

            Background Color Picker:
        </div>
        <div class="cell js">
            <input type="color" onchange="changeBackground()" id="color_value" name="color_value" value="Black">
            <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
            <button class="button two" type="button" onclick="">
                Set Color:
            </button>
        </div>

<div id="output">traget DIV</div>

Q: Is there a way to do document.(classNameForADiv).style.backgroundColor = color; ?

A: Yes, it's called querySelector, and it accepts a valid CSS selector. It will retrieve the first element in a page that matches the selector:

document.querySelector('.my-class').style.backgroundColor = color;

<div class="cell text">
    Background Color Picker:
</div>
<div class="cell js" >
    <input type="color" id="color_value" name="color_value" value="Black">
    <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
    <button class="button two" type="button" onclick="changeBackground()">
        Set Color:
    </button>
</div>
<script>
    function changeBackground() {
        var color = document.getElementById("color_value").value;
            document.body.style.backgroundColor=color;
    }
</script>

You can use document.querySelector(".my-class") to grab the first element that has my-class as class. In your case like so:

<div class="cell text">
  Background Color Picker:
</div>
<div class="cell js">
  <input type="color" id="color_value" name="color_value" value="Black">
  <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
  <button class="button two" type="button" onclick="changeBackground()">
    Set Color:
  </button>
</div>
        
 <script>
    function changeBackground() {
      let color = document.getElementById("color_value").value;
      document.querySelector(".cell").style.backgroundColor = color;
    }
 </script>

querySelector allows to grab HTML elements with the same selectors as CSS, which can be really handy. If you wanna learn more about it, here is a great ressource.

本文标签：