Add CSS style to DOM element via javascript

Question

I am trying to toggle the opacity of a DOM element on an event which is attached to a javascript method. A click on checkbox is what triggers the completed method.

The below method is triggered on a click:

 completed: function(){
                var task = this.$('.actions');

                console.log(task);

                if(!task.hasClass('toggle')){

                    task.addClass('toggle');
                } else {
                    task.removeClass('toggle');
                }

               }
            }

The CSS .toggle{ opacity: 0.4; }

and the HTML (underscore template, in this case) is

        <div class="table table-bordered">
            <div class="actions">
                <input type="checkbox" class='completed'>
                <button type='button' class='delete btn btn-danger btn-xs'> x </button>
                <button type='button' class='edit btn btn-primary btn-xs' id='actions'> edit </button>
                <span style='font-weight:bold' class="word" spellcheck='false'> <%= task %>-</span>
                <span class="definition" spellcheck='false'> <%= description %> </span>
            </div>
        </div>

But nothing happens. How can I addClass to a DOM element via javascript?

`this.$('.actions');` is not correct. if you want `.actions` _inside_ the current element, use `$('.actions', this);` — Rhumborl, Jan 14 '15 at 20:27
possible duplicate of [How do I add a class to a given element?](http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element) — Ryan, Jan 14 '15 at 20:32

score 2 · Answer 1 · answered Jan 14 '15 at 20:25

2

When you add a class using jQuery, you don't need a prefix .:

task.addClass('toggle');

Furthermore, your function seems slightly off:

You either want to use this, when you want to select .action globally

var task = $('.actions');

or this, if it shall be a childnode of the current this object:

var task = $( this ).find('.actions');

answered Jan 14 '15 at 20:25

Sirko

72,589
19
149
183

I want the direct parent of $(this), so find() doesnt make sense. – redress Jan 14 '15 at 20:32
@redress So use `$(this).parent()` – Sirko Jan 14 '15 at 20:33
your `var task` declarations dont work, but `this.$('.actions')` does ...? – redress Jan 14 '15 at 20:33
$(this).parent() also produces no response – redress Jan 14 '15 at 20:34
so how does you complete object look like? There are some structures, that make your code valid – Sirko Jan 14 '15 at 20:35
ive updated my method above, and NOTE: the method is triggered on checkbox being clicked – redress Jan 14 '15 at 20:37
what is the actual `this` object, when the function is called – Sirko Jan 14 '15 at 20:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/68833/discussion-between-redress-and-sirko). – redress Jan 14 '15 at 20:45

Add CSS style to DOM element via javascript

1 Answers1