How to use "document.querySelector" in Google Blogger?

The following code seems to be working just fine on a computer, but breaks in Google Blogger.

<style>
  .box {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 1px solid #ccc;
    outline : 1px solid #f00;
  }
  .box p{
    color: blue;
  }
</style>

<div class="box">
  <p>This is test text.</p>
</div>
<script>
  var box = document.querySelector('.box');
  box.style.border = "5px solid red";
  box.style.outline = "30px solid blue";
</script>

Any help would be appreciated.

2 answers

  • answered 2021-07-24 20:05 Azer8

    in your blogger

    Navigate to the Layout tab and click Add a Gadget ,select “HTML/JavaScript" ,create your js code and save it you can follow this tutorial it will take you step by step:a link

  • answered 2021-07-24 20:23 crazzyguti

    your selector is first class element

    if all (.box)

    use document.querySelectorAll(".box") return all box elements in array

    example

      var box = [...document.querySelectorAll('.box')];
        
      
      box.forEach((el) => {
        el.style.border = "5px solid red";
        el.style.outline = "30px solid blue";
      })
      .box {
        width: 100px;
        height: 100px;
        background: yellow;
        border: 1px solid #ccc;
        outline: 1px solid #f00;
        margin: 10px;
      }
    
      .box p {
        color: blue;
      }
    <div class="box">
      <p>This is test text.</p>
    </div>
    
    <div class="box">
      <p>This is test text.</p>
    </div>
    
    <div class="box">
      <p>This is test text.</p>
    </div>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum