你并不是真的想在 * existing * 类中添加属性，你应该做的是在每个元素的class * list * 中添加一个包含这些红色/填充属性的 * new * 类。
工具包
1.您需要一些方法来"拾取"要处理的元素。由于您有多个querySelectorAll，因此它可能是首选，它将为您提供一个静态节点列表（而不是像getElementsByClassName这样的方法提供的动态HTML集合，如果您不正确使用它们，它们会产生一些副作用）。
1.你需要一种iterate over the elements的处理方式，在这个链接中提供了很多可能性，但是forEach是一个很好的选择。
1.你需要一种方法来更新迭代中每个元素的类列表，在classList的方法中，add接受你想要添加的CSS类的字符串。
1.定义一个可以使用的新类（本例中为"redpad"）。
1.最后，因为您希望避免在2023中使用内联JS，所以应该使用addEventListener，它接受a）事件类型和b）在触发该事件时要调用的函数的名称。

const button = document.querySelector('button');
const boxes = document.querySelectorAll('.box');

button.addEventListener('click', turnRedAndAddPadding);

function turnRedAndAddPadding() {
  boxes.forEach(box => {
    box.classList.add('redpad');
  });
}

.box {
  border: 1px solid;
  display: inline;
}

.redpad {
  background-color: red;
  padding: 0.5em;
}

<button type="button">Press</button>

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

基于that post，您可以尝试以下操作：

function turnRedAndAddPadding() {
  stylesheet = document.styleSheets[0]
  stylesheet.insertRule(".box { background-color: red; padding: 10px;}", 0);
}

.box {
  border: 1px solid;
  display: inline;
}

<button onclick="turnRedAndAddPadding();">Press</button>

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

希望有帮助。

是的，您可以使用style属性用JavaScript向类.box添加样式。
下面是一个例子：

function turnRedAndAddPadding() {
  let stylesheet = document.styleSheets[0];
  let newRule = ".box { background-color: red; padding: 10px;}";
  if (stylesheet.insertRule) {
    stylesheet.insertRule(newRule, stylesheet.cssRules.length);
  } else if (stylesheet.addRule) {
    stylesheet.addRule(".box", newRule.substring(newRule.indexOf("{")+1,newRule.lastIndexOf("}")));
  }
}

.box {
  border: 1px solid;
  display: inline;
}

<button onclick="turnRedAndAddPadding();">Press</button>

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

W3 Schools的一些非常有用的文档讨论了如何使用getElementsByClassName，你可以找到here，你也可以通过每个元素的padding属性从here找到编辑填充的方法。
下面我找到了所有有类框的div。然后对它们进行迭代并分配颜色和填充。你可以根据自己的喜好进行修改。
还有many other properties，您可以为每个DOM元素（如divs）进行编辑！

function turnRedAndAddPadding() {
  const collection = document.getElementsByClassName('box');

  for (let i = 0; i < collection.length; i++) {
    collection[i].style.backgroundColor = 'red';
    collection[i].style.padding = '5px';
  }
}

只要添加一些javascript就可以实现你的目标。
document.querySelectorAll使用此函数，您可以收集类box的所有元素，然后使用foreach函数循环

function turnRedAndAddPadding() {
  let box = document.querySelectorAll('.box');
  box.forEach(el => {
    el.style.background = 'red';
    el.style.padding = '20px'
  })
}

.box {
  border: 1px solid;
  display: inline;
}

<button onclick="turnRedAndAddPadding()">Press</button>

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>