# Changing class of DOM object in RJS

**URL:** <https://www.ruby-forum.com/t/changing-class-of-dom-object-in-rjs/73390>\
**Category:** Rails\
**Created:** [October 24, 2006, 10:29am UTC](https://www.ruby-forum.com/t/changing-class-of-dom-object-in-rjs/73390 "2006-10-24T10:29:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kelvin\_Jones](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/9de0a6/32.png) [@Kelvin\_Jones](https://www.ruby-forum.com/u/Kelvin_Jones)\
**Post date:** [October 24, 2006, 10:29am UTC](https://www.ruby-forum.com/t/changing-class-of-dom-object-in-rjs/73390/1 "2006-10-24T10:29:04Z")

</div>

Hey, in an RJS file, what is the most effecient way to set the  
className of an dom element?

is there some page.replace\_class or such?

I am new to ruby on rails, so sorry if this is a dumb question.

Thanks!

---

<div class="post-metadata">

**Author:** ![Kelvin\_Jones](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/9de0a6/32.png) [@Kelvin\_Jones](https://www.ruby-forum.com/u/Kelvin_Jones)\
**Post date:** [October 24, 2006, 12:52pm UTC](https://www.ruby-forum.com/t/changing-class-of-dom-object-in-rjs/73390/2 "2006-10-24T12:52:45Z")

</div>

render :update do |page|  
page \<\< “$(‘element\_id’).className = ‘new-class’”  
end

or

render :update do |page|  
page \<\< “new Element.ClassNames(‘element\_id’).set(‘new-class’)”  
end

Element.ClassNames also has add() and remove() methods.

---

<div class="post-metadata">

**Author:** ![Kelvin\_Jones](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/9de0a6/32.png) [@Kelvin\_Jones](https://www.ruby-forum.com/u/Kelvin_Jones)\
**Post date:** [October 24, 2006, 12:36pm UTC](https://www.ruby-forum.com/t/changing-class-of-dom-object-in-rjs/73390/3 "2006-10-24T12:36:27Z")

</div>

Kelvin Jones wrote:

> Hey, in an RJS file, what is the most effecient way to set the  
> className of an dom element?
> 
> is there some page.replace\_class or such?

page[‘element’].className = ‘class’

–  
We develop, watch us RoR, in numbers too big to ignore.

---

<div class="post-metadata">

**Author:** ![Kelvin\_Jones](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/9de0a6/32.png) [@Kelvin\_Jones](https://www.ruby-forum.com/u/Kelvin_Jones)\
**Post date:** [October 25, 2006, 8:40am UTC](https://www.ruby-forum.com/t/changing-class-of-dom-object-in-rjs/73390/4 "2006-10-25T08:40:16Z")

</div>

What is the difference between those two techniques? Which would I want  
to use when? I dont quite understand what is going on in Chris H.'s  
technique, could someone explain?

Thank you!

---

<div class="post-metadata">

**Author:** ![Kelvin\_Jones](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/9de0a6/32.png) [@Kelvin\_Jones](https://www.ruby-forum.com/u/Kelvin_Jones)\
**Post date:** [October 25, 2006, 10:00am UTC](https://www.ruby-forum.com/t/changing-class-of-dom-object-in-rjs/73390/5 "2006-10-25T10:00:29Z")

</div>

On 25 October 2006 10:38, Kelvin Jones wrote:

> What is the difference between those two techniques? Which would I want  
> to use when? I dont quite understand what is going on in Chris H.'s  
> technique, could someone explain?

Mark showed only the main part of javascript generation

page[‘element’].className = ‘class’

This code can be put in RJS template and it will work).  
Chris used more explicit form:

render :update do |page|  
page \<\< “$(‘element\_id’).className = ‘class’”  
end

Which can be used in controller’s action code. In fact, those two  
produce  
equal results. RJS templates are implicitly wrapped in “render :update”  
block.

Also, Mark has showed the use of page element proxy while Chris just  
generate  
all the code himself. Personally I would prefer using element proxies.

Also, Chris has showed the use of Element.ClassNames class from  
Prototype  
library (that is shipped with Rails). It allows to add / remove  
individual  
classes (e.g. If you have several class names assigned to element, you  
can  
remove or add one without interfering the others). It’s useful when you  
need  
e.g. mark some element as “selected” or remove such mark.  
But, there is a more Rails-natural way to make use of Element.ClassNames  
class. In prototype, if you call .classNames() on DOM element, it will  
return  
the appropriate Element.ClassNames instance wrapped around that element.  
So  
you could just do (in javascript):  
$(‘my\_element\_id’).classNames().add(‘selected’)  
or  
$(‘my\_element\_id’).classNames().remove(‘selected’)

So, because of this nice feature of Prototype, you can continue using  
element  
proxies to do all the stuff (in RJS template):

```
page['my_element_id'].classNames.add('selected')

```

or  
page[‘my\_element\_id’].classNames.remove(‘selected’)

I hope now you have a better understanding of what is going on in RJS.

---

<div class="post-metadata">

**Author:** ![Kelvin\_Jones](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/9de0a6/32.png) [@Kelvin\_Jones](https://www.ruby-forum.com/u/Kelvin_Jones)\
**Post date:** [October 26, 2006, 12:37pm UTC](https://www.ruby-forum.com/t/changing-class-of-dom-object-in-rjs/73390/6 "2006-10-26T12:37:49Z")

</div>

Thank you Maxim, very useful explanation. Also thanks Mark and Chris  
for the prompt answers!

Kel