Question

我的HTML代码中有一个div。我想将它的背景颜色更改为红色（例如红色，但它可以是另一种颜色），但我不想在Jquery中使用.css（）方法，因为.css（）方法在我的HTML代码中做了类似的事情：

<div id="my_div" style="background-color: red"> Elements inside my div </div>

我不想在HTML代码中使用style属性，但是如何使用它来动态更改css？

更新：我无法使用课程，因为颜色不会一直是红色，可以是蓝色，黄色，紫色或十六进制颜色。

Answer 1

您可以使用CSS类：

.red {
  background-color: red;
}

$("#my_div").addClass("red");

如果您有多种颜色，则可以创建多个类，但这会以某种方式违背使用类的泛化目的，如注释中提到的@pst，您可能更好地使用css()。

Answer 2

像JoãoSilva建议的那样，分配一个类是首选的方法，但是将类设置为“red”几乎与通过style属性设置颜色一样糟糕。你的文档和javascript中仍然有标记（'color = red'）。

而是指定一个相关名称，例如，显示该元素的状态。

$("div.payment").addClass("overdue");

然后，您只需告诉该元素应显示为“过期”，并且由CSS定义决定“过期”的内容。

Answer 3

您可以设置class =“”属性并在样式表中定义背景颜色

Answer 4

我认为除了CSS或类之外，还没有其他方法可以为您的元素添加样式。

我更喜欢添加类名，因为它可以提供更清晰的代码。我相信你事先知道颜色是什么，不管它是十六进制的。您可以为要使用的所有颜色创建单独的类名，只需将该类添加到元素中即可。它将使您的代码定义良好..

Answer 5

如果您真的想与dom风格混为一谈，则可以使用以下内容。

function changeCSS(selector, values) {
	Object.values(document.styleSheets).forEach(s => {
		try {
			if ('cssRules' in s) {
				Object.values(s.cssRules).forEach(c => {
					if (c.selectorText === selector) {
						Object.assign(c.style, values);
					}
				});
			}
		} catch { }
	});
}

const colors = ['red', 'blue', 'yellow', 'black', 'pink', 'white'];
let pos = 0;

function setColor() {
	changeCSS('.test-class', { color: colors[pos], 'background-color': colors[5 - pos] });
	pos = (pos + 1) % 6;
}

.test-class {
  color: blue;
  font-size: 33px;
}

<span class="test-class" onclick="setColor()">Click me please</span>

如何在不使用JQuery中的.css（）方法的情况下动态更改CSS属性？

5 个答案: