Question

无论如何我可以访问特定div的样式属性吗？例如，我有一个如下代码

<div class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>

我想为这个部门应用其他一些背景颜色。但我不想修改类“测试”，因为它也在其他一些地方使用。无论如何只使用CSS访问样式属性并应用我的新颜色吗？

Answer 1

我认为attribute selectors可能正是您所寻找的：

div.testing[style="background-color:#ff00ff;"] {
    background-color: new_color !important;
}

Answer 2

您可以创建另一个类并覆盖必要的属性：

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

并像这样使用它：

<div class="testing testing-active"></div>

Answer 3

您需要制作一个比样式具有更高优先级的样式。您可以使用!important属性执行此操作：

<div class="testing" style="background-color:#ff00ff;background-color:red !important;">

重要的警告：无论你想做什么都不是一个好主意，因为代码很难维护。你试图解决的根本问题是什么？

Answer 4

您可以使用以下特定样式访问元素：

.testing[style="background-color:#ff00ff;"] {
    /* put your attributes here*/
}

但您无法更改background-color属性，因为此属性在html中具有更高的优先级。

看到这个：

.testing[style="background-color:#ff00ff;"] {
    background-color: #00f; /* not possible */
    margin: 30px; /* possible */
}

你能做的就是在你的html中添加一个新属性：

<div class="testing" changecss="true">
    This is my test Paragraph
</div>

并添加此css：

.testing[changecss="true"] {
    background-color: #00f;
}

同时查看JsFiddle。

Answer 5

“认为它是一个动态代码。如何在不使用javascript的情况下添加新类？”

答案你不能使用CSS动态/运行时添加新类。唯一的方法是使用javascript / jquery： -

HTML:
    <div id="mydiv" class="testing" style="background-color:#ff00ff;">
    This is my test Paragraph
    </div> 

JQUERY: 

    $('#mydiv').css('background','#ColorCode');

这样你的班级也不会改变（因为它在其他地方使用），你也可以改变背景。

我可以问你为什么要用CSS来实现这个目的吗？

通过CSS访问Style属性

5 个答案: