Over-riding css classes in javascript

Question

Is there any way within JS (using Angular / jQuery) to override/change, or create/remove a CSS class?

I'm using a library that has predefined classes for particular features of the UI. I want the user to be able to specify some features that are defined in CSS (such as color). The library is using SVG, so I'm not sure if I can use the standard selector methods to add another class (I've not tried, but this might be possible).

I could also modify the library to add a method to override the color, but this is not my preferred route if I can easily change CSS classes once loaded.

As an example -:

I might have a class that's defined in my CSS -:

.buttonclass { color: black; }

then in the library, this class is used (it's actually used within an SVG tag). I want to be able to change the color: property to something that's defined within javascript as it's user configurable.

The specific example is the class is used to define the color of a graph in an SVG graphing library. There's no method in the library to change the color of the line, but I want the user to set this.

Your question is rather nebulous — do you have *any* concrete example code to show us? — Terry, Oct 31 '14 at 18:17
http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply — danyamachine, Oct 31 '14 at 18:21
I'm not wanting to add a class to an element - I want to change the properties of the css class. ngclass adds a class to an element. — cdjackson, Oct 31 '14 at 20:01
@danyamachine - thanks. I'd not found this link, but at leat you've understood what I'm trying to do :) I'll take a look at this. — cdjackson, Oct 31 '14 at 20:14
hehe ya i personally thought what you were asking was pretty clear :p i hope it helps — danyamachine, Oct 31 '14 at 21:08

score 0 · Answer 1 · answered Oct 31 '14 at 18:37

0

Try ng-class="{ [Your Class Name]: [Your $scope Variable] [operator] [Value] : [More option]}"

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

answered Oct 31 '14 at 18:37

Ricc

321
3
6
15

This adds a class to an element - I want to change the properties of the class - not to add another class as it's embedded in SVG. – cdjackson Oct 31 '14 at 20:09

score 0 · Answer 2 · answered Oct 31 '14 at 19:19

0

You can absolutely do this in jQuery.

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

answered Oct 31 '14 at 19:19

Raphael Serota

2,157
10
17

This adds a class to an element - I want to change the properties of the class - not to add another class as it's embedded in SVG. – cdjackson Oct 31 '14 at 20:10
Sorry. I misunderstood your question. – Raphael Serota Oct 31 '14 at 20:43
It's a bit messy, but if you want, you can use jQuery to add/remove style tags from the DOM. `$('body').append('')` `$('#new-styles').remove()` – Raphael Serota Oct 31 '14 at 20:46

score 0 · Answer 3 · answered Oct 31 '14 at 19:26

0

You said you are using angular. I'd suggest ng-style

example from the docs: 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>

answered Oct 31 '14 at 19:26

Mallen

262
2
9

Thanks. The problem is that the code is embedded in a library, so I can't use the ng-style (or ng-class) directive. I might be able to use a selector to add a class to that added by the library, but it seemed easier to me if I could simply change the css definition, but I'm guessing from the answers that's not easily possible. – cdjackson Oct 31 '14 at 20:13

score 0 · Answer 4 · answered Nov 01 '14 at 00:17

Considering your situation, you could manually write a style tag to the head with the class you want to overwrite using angular.

Considering your color example, you could do this:

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

However, I wouldn't say this is a very good solution as you'll essentially end up with a bunch of excess style tags in your header every time you changed the color of something, and with more complex css I'm sure some issues would arise.

I would write your own css file and include it in the project, with the proper attributes, and just use angular to manage the css class changes.

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

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

If you -really- want to modify the CSS rules on the fly, you can check out http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

Over-riding css classes in javascript

4 Answers4