3

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

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

我不想在我的 HTML 代码中使用 style 属性，但是我能做些什么来使用它来动态更改 css 呢？

更新：我不能使用类，因为颜色并不总是红色，它可以是蓝色、黄色、紫色或十六进制颜色。

4

5 回答 5

6

您可以使用 CSS 类：

.red {
  background-color: red;
}

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

如果您有多个颜色，则可以创建多个类，但这在某种程度上违背了使用类的泛化目的，正如评论中提到的@pst，您可能会更好地使用它css()。

于 2012-09-04T21:29:15.453 回答
3

分配一个类，就像 João Silva 建议的那样，是首选的方法，但分配类“红色”几乎与通过样式属性设置颜色一样糟糕。您的文档和 javascript 中仍然有标记 ('color=red')。

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

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

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

于 2012-09-04T21:35:37.380 回答
1

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

于 2012-09-04T21:30:49.090 回答
0

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

我更喜欢添加类名，因为它会使代码更简洁。我相信你事先知道颜色是什么，无论是十六进制的。你可以为你要使用的所有颜色创建单独的类名，然后添加类到元素..它将使您的代码定义明确..

于 2012-09-04T22:42:38.150 回答
0

如果您真的想弄乱 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>

于 2019-08-01T12:48:23.627 回答