Friday, June 4, 2010

Change CSS class from JavaScript

Recently, I was working on Magento Customization. I encountered a small problem. The css class which was applied to div tag by Magento was disturbing whole layout on particular page. So I need to set my own class over there.

I was having two options.

1) Change css class in Magento core file. However, this was impossible as this change will affect all other pages which was not desirable.

2) Change css class on particular page when page loads.

I choose second option. OnLoad of a body I called a JavaScript function. In JavaScript, I have used following code to change class.

document.getElementById('myDiv').className='newClassName';

When page loads first time, it will be a disturbed layout but once body on load event gets fired the layout will be proper.

Posted by at

2 comments:

  1. AnonymousJune 4, 2010 at 8:12 PM

    Hi Hiren Kunal Parikh here..
    In that case u can also use jquery ...

    $(controlId).addClass();
    add this in $(document).ready(function(){
    });

    Using jquery you can apply style sheet n much more very easily .. so check it out ..

    ReplyDelete
  2. Hiren DaveJune 5, 2010 at 11:58 AM

    Hi Kunal

    Thanks for your comment.

    Yes you are right we can use jquery but Magento use Prototype js. It also use same syntax as jQuery. So if we want to use jQuery with Magento we have to resolve this conflict first. To avoid this I have used pure JavaScript.

    ReplyDelete

Subscribe to: Post Comments (Atom)