Question

现在问题远比看上去复杂得多。我不是在寻找如何将CSS类应用于DOM元素，我已经知道如何做到这一点（<div class="MyCssCLass"></div>）

我正在尝试将类的CSS属性的部分应用于DOM元素。

让我说我必须关注CSS：

.MyClass
{
    background-color:red;
    color:blue;
}

和这个HTML

<div id="MyDiv">Some text</div>

现在我想说我只想将背景颜色应用到MyDiv我不能只做：

<div id="MyDiv" class="MyClass">Some text</div>

因为这也会将CSS颜色属性应用于MyDiv，这样会很糟糕。

到现在为止你可能在想为什么你不用你自己的CSS覆盖CSS类？或者你为什么不只用MyBckgrdClr创建另一个班background-color:red;并将其交给MyDiv？

嗯......让我们说生活并不总是那么简单。

凭借我的所有智慧，我尝试使用JQuery：

在这里，我动态创建另一个<div>并向他提供MyClass CSS类。

var MyClassElement = $('<div id="MyClassElement">').addClass('MyClass');

然后我会将其插入body

$('body').append(MyClassElement);

现在我将尝试更改MyDiv

的背景

$("#MyDiv").css("background", MyClassElement.css("background"));

现在这项工作在Chrome中非常出色，但在Mozilla，IE，Opera等方面却没有那么多......

但是嘿！我还有一些智慧！所以我们试试吧！

如果我使用Javascript方法怎么办？

首先想到的是这行代码：

document.getElementById('MyDiv').style.background = document.getElementById('MyClassElement').style.background;

但这也没有用......但这次甚至Chrome都没有正确显示背景......

所以...我现在该怎么办......

... ...

...坎

... ... ... ...

哦！是啊！得到它了！我将使用这些人似乎没有使用的东西。又叫什么呢......哦，是的调试。

让我们检查document.getElementById('MyClassElement').style.background返回的内容

所以我插入了：

console.log(document.getElementById('MyClassElement').style.background);

在$('body').append(MyClassElement);行之后，我选择F12来查看该控制台中的内容：

(an empty string)

...

现在我开始快速耗尽智慧。

有谁比我更聪明谁可以告诉我我做错了什么以及如何实现这一目标？

我正在寻找的是

为什么JQuery部分在chrome中工作得很好而在其他浏览器中却没有？为什么javascript对所有浏览器都失败了？

小提琴：jsfiddle.net/7h2Lsxmx/3 /

PS 我还注意到.MyClass中的任何CSS属性似乎都没有改变Javascript DOM元素的任何.style属性{{1}对于JQuery对应物。

修改

这是一些更多的解释。

我有5个CSS文件。

dark.css，light.css，gray.css，blueish.css，kindOfGreen.css

它们都有相同的类，但每个属性的值都不同。

所以dark.css可能是：

.css()

和Blueish.css可能是：

.MyClass
{
    background-color:black;
    color:gray;
}

因此，为了更改页面的颜色，我可以在运行时使用PHP包含不同的css文件。现在你们应该开始看看我的目标。

1-用户选择主题 2-在cookie中存储主题选择 2-使用适当的css文件重新加载页面

因为这都是动态的我不能（@Matthias我不会）去为五个css文件中的每一个中改变值的每个属性硬编码一个类，如果可以让代码在至少mozilla和IE。无法更改类，因为它也被用于其他元素，因此会改变它们，这也是不好的。

Answer 1

style仅允许您访问元素的内联样式。要访问所有样式属性，请使用getComputedStyles。 More details and examples here

Answer 2

.red-background { 
  background-color: red;
}

.blue-text-color {
  color: blue;
}

<div class="red-background">This div has a red background</div>

<div class="blue-text-color">This div has blue text color</div>

<div class="red-background blue-text-color">This div has a red background AND blue text color</div>

我不完全确定这是一个问题。

Answer 3

您知道可以将多个类应用于一个元素吗？用空格分开它们。然后你可以拆分选择器。

否则，您总是可以编写一个不同的选择器，例如，仅针对具有指定类的div的选择器：“div.MyClass”。

在我看来，使用JavaScript似乎并不是最好的方式。

Answer 4

我很好奇，因为在什么情况下你不能添加更多的CSS课程。

无论如何，覆盖css添加＆＃39; important＆＃39; proprity。

<强> jQuery的：

$("#MyClass").css('color','black','important');

jsFiddle：http://jsfiddle.net/7h2Lsxmx/1/

将类的CSS属性的一部分应用于DOM元素

4 个答案: