Parameterize jQuery addClass?

Question

Is it somehow possible to parameterize the jQuery addClass() method? Like, having a css class with a color property which is set when the addClass() method is called?

I hope that makes sense as I am very new to JavaScript and CSS. If it's of importance, I'm working on extending the MediaWiki VisualEditor. There this method is used to immediatly show/render changes made in the editor. But I couldn't find an example which would require parameterization.

If it's not possible, I'd love to know how to do it.

If it's not, maybe someone can suggest how to realize what I want another way?

Edit:

That's the current state: When I add some annotation to the text, let's say a languageAnnotation, this is called:

this.$element
    .addClass( 've-ce-languageAnnotation' )
    .addClass( 've-ce-bidi-isolate' )
    .prop( {
        lang: this.model.getAttribute( 'lang' ),
        dir: this.model.getAttribute( 'dir' ),
        title: this.constructor.static.getDescription( this.model )
    } );

This is ve-ce-languageAnnotation:

.ve-ce-languageAnnotation {
border-bottom: 1px dashed #ccc;
background-color: #ebf3f5;
}

This is ve-ce-bidi-isolate:

.ve-ce-bidi-isolate {
unicode-bidi: isolate;
unicode-bidi: -moz-isolate;
unicode-bidi: -webkit-isolate;
}

I interpreted this as the prop() function setting some kind of parameter. So this is what I tried for my textColor annotation:

     this.$element
    .addClass( 've-ce-textColorAnnotation' )
    .prop( {
        color: this.model.getAttribute( 'style' ),
        title: this.constructor.static.getDescription( this.model )
    } )
    ;

With ve-ce-TextColorAnnotation:

.ve-ce-textColorAnnotation {
    color: red;
}

This always produces red. When I try to enter something else then a legit color, nothing happens.

Edit2: I guess one option would be to create a class for each possible color, and adding the right class depending on the parameter? Like this:

var color = this.model.getAttribute('style');
if (color == 'blue') {
    this.$element.addClass( 'blueText' )
} else if (...

but that doesn't look like a really good idea.

Edit 3: According to the top answer in this question, what I want is not possible - but I can directly apply an attribute without using classes by using this.$element.css('attr', 'value'). I guess I can use this for what I need.

Like, having a css class with a color property which is set when the addClass() method is called? That's the primary objective of addClass(), .removeClass(), and .toggleClass(). Just make a class as if it was a state (ie. on, off, high, low, show, hide, etc...) — zer00ne
– zer00ne, Commented Feb 5, 2016 at 8:30
@Gerwin I've edited my question with some more information. GMchris I want to always add a color when addClass is called, but the color may vary, so I want something like setColor(String color). If something like that is possible. — Jdv
– Jdv, Commented Feb 5, 2016 at 8:35
I have 5+ years of experience with CSS and JS and I don't understand the question at all, could you please consider editing it for a better explanation? Maybe add a pseudo example, or an example in another language — Francisco Presencia
– Francisco Presencia, Commented Feb 5, 2016 at 8:42

GMchris · Accepted Answer · 2016-02-05 09:34:02Z

1

It appears you simply want to set a color, rather than add a class. Classes in HTML can be used for stylization or DOM navigation, however in your case you simply want to apply a different color to an element. You don't need to use classes for that, especially if the colors are dynamic.

What you want to do is call jquery's .css() method. It can be used with a single argument like so:

element.css({
  'color': 'black',
  'height': '100px'
});

or several, if you only want to edit a single property:

element.css('color', 'black');

Without using jQuery, you could also do this:

element.style.color = 'black';

edited Feb 5, 2016 at 9:34

answered Feb 5, 2016 at 8:57

GMchris

5,7064 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Francisco Presencia Over a year ago

Should be ('color', 'black')

GMchris Over a year ago

Right you are. Fixed it.

Community · Accepted Answer · 2017-05-23 10:28:25Z

1

What can you do in a simple way. Let's say you have a drop down from which you chose the colors. On the value attribute of the option you have blueText for blue, redText for red and so on for each color you want.

Then on the code you can get the value. You can see here how to get the value then you have the classes in CSS like redText, blueText and so on. When the user clicks on the option you catch the event and do this simple pice of code:

this.$element.addClass( 'text that you got from value attribute' )

You can of course remove the classes before you do the add.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Feb 5, 2016 at 8:49

Radu

1,06612 silver badges36 bronze badges

2 Comments

Jdv Over a year ago

This would require me to have a class for each color, right? That doesn't sound like good style. Is it possible to apply one attribute without using classes? I've read something along the lines about the jQuery .attr() method, but can't make it work (not even without a parameter).

Radu Over a year ago

you need only the color of the text to be changed? then yes you can use something like yourItem.style.color = "your new class". Or you can try with attr as you said ;)

Collectives™ on Stack Overflow

Parameterize jQuery addClass?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related