如何在 Google Blogger 中使用 "document.querySelector"？

Question

以下代码似乎在计算机上运行良好，但在 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>

如有任何帮助，我们将不胜感激。

Answer 1

在您的博主中

导航到“布局”选项卡并单击“添加小工具”，select“HTML/JavaScript”，创建您的 js 代码并保存您可以按照本教程一步步进行：a link

Answer 2

你的选择器是第一个 class 元素

如果全部 (.box)

使用document.querySelectorAll(".box") return 数组中的所有框元素

例子

  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>

如何在 Google Blogger 中使用 "document.querySelector"？

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

css

blogger