Me Myself & C#

Manoj Garg’s Tech Bytes – What I learned Today

DOM property comparison for different browsers: What Works Where?

Posted by Manoj Garg on November 25, 2009

Today, I was working on a UI enhancement task where I had to do some DOM manipulation. Basically task was changing color of some SPAN elements in DOM depending on their value like if it’s value is XXX then show in RED color and so on. As always I was using IE to test my Java script code written to do the job. In JS code, I used “innerText” property of SPAN element to get the text of that element and then did the comparison to change the color and It worked fine. When I ran same JS code on Mozilla, it didn’t run (I mean it got executed but didn’t changed color of SPAN elements to RED L) . On debugging the script, I was surprised to see value of innerText property being returned null. When googled around it and found that only Mozilla doesn’t support this property L. Mozilla has another property “textContent” which has same value as innerText in other browsers.

Solution was simple, use an ORing of both the values instead of putting if-else block in code to use textContent if the user is running Mozilla or innerText for any other browser.

var txtName = clientNameElement.innerText || clientNameElement.textContent;

I picked up this solution from here. This link provides a good comparison of various DOM properties on different browsers that is what works and what not J.

Hope it helps some of you while writing code to cater to multiple browsers J

Advertisements

One Response to “DOM property comparison for different browsers: What Works Where?”

  1. Yeah , I d love to be in those domme games! I love your post thoug

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: