Question

说我有一个课程如下：

.X {
   border:1px solid red;
   background-color: blue;
}

是否可以使用脚本更改类border的{{1}}和background-color的颜色，而不会影响所有其他属性？

Answer 1

要实现这一点，您可以使用一点JavaScript。

var myElements = document.querySelectorAll(".X");

for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.border = "1px solid red";
    myElements[i].style.backgroundColor = "blue";
}

Answer 2

是的，您确实可以使用Javascript或jQuery更改元素的css属性。

Javascript方式

document.getElementsByClassName("X")[0].style.border = "1px solid blue";

详细了解HTMLElement.style property。

jQuery方式

$(".X").css("border", "1px solid blue");

详细了解jQuery.css() method。

Answer 3

正如其他人所说，可以改变风格定义，但你真的想这样做吗？我认为你可以通过添加另一个类

来实现相同的结果

.X.blue {background-color:blue;}

并将其添加到您的样式：

argv

Answer 4

取决于用例

＆＃13;

// All elements with the class X
const elX = document.querySelectorAll('.X');
elX.forEach(i => i.setAttribute("style", "color: green; border:solid tomato"));

// First element with the class Y
const elY = document.querySelector('.Y');
// All at once
// elY.setAttribute("style", "color: tomato; border:solid tomato");

// Or you can set the styles individually
elY.style.color = "tomato";
elY.style.border = "solid tomato";

＆＃13;

<div class="X">
  <h1>Yo!</h1>
</div>

<div class="X">
  <h1>Yo!</h1>
</div>

<div class="Y">
  <h1>Yo!</h1>
</div>
<div class="Y">
  <h1>Yo!</h1>
</div>

＆＃13;

是否可以更改样式的颜色组件？

4 个答案: