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.