Question

JS（使用Angular / jQuery）是否有任何方法可以覆盖/更改或创建/删除CSS类？

我正在使用一个库，该库具有用于UI特定功能的预定义类。我希望用户能够指定CSS中定义的一些功能（例如颜色）。该库正在使用SVG，所以我不确定是否可以使用标准选择器方法添加另一个类（我没试过，但这可能是可能的）。

我还可以修改库以添加覆盖颜色的方法，但如果我可以在加载后轻松更改CSS类，这不是我的首选路径。

作为一个例子 - ：

我可能有一个在我的CSS中定义的类 - ：

.buttonclass { color: black; }

然后在库中使用此类（它实际上在SVG标记中使用）。我希望能够将color:属性更改为javascript中定义的属性，因为它是用户可配置的。

具体示例是该类用于定义SVG图形库中图形的颜色。库中没有方法可以更改行的颜色，但我希望用户设置它。

Answer 1

尝试 ng-class =＆＃34; {[您的班级名称]：[您的$ scope变量] [operator] [Value]：[More option]}＆＃34;

ng-class="{myclass: predicate == 'Date'}"

Answer 2

你绝对可以在jQuery中这样做。

$('#some-element').addClass('some-class')
$('#some-element').removeClass('some-class')

Answer 3

你说你正在使用角度。我建议ng-style

来自文档的示例： plunker

<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>

Answer 4

考虑到您的情况，您可以手动将样式标记写入要使用angular覆盖的类的头部。

考虑到你的颜色示例，你可以这样做：

angular.element(document)
  .find('head')
  .append(
    '<style type="text/css">@charset "UTF-8";.buttonclass{color:'blue';}</style>'
  );

但是，我不会说这是一个非常好的解决方案，因为每次更改某些内容的颜色时，您的标题中最终都会出现一堆多余的样式标记，并且会更复杂css我确定会出现一些问题。

我会编写你自己的css文件并将其包含在项目中，并使用适当的属性，并使用angular来管理css类的更改。

<style>
.buttonclass.red { color: red; }
.buttonclass.blue { color: blue; }
</style>

<button ng-class="{'red': isRed, 'blue': isBlue}"></button>

如果您真的想要动态修改CSS规则，可以查看http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

在javascript中覆盖css类

4 个答案: