style.setattribute and CSS capitalize

Hi - I'm trying to use inputE1.style.setattribute("text-transform", 'capitalize');
and for whatever reason IE isn't liking it.  Is my syntax incorrect?

Thanks!
LVL 4
zack4x4Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nap0leonCommented:
Can you use "inputE1.style.textTransform='capitalize' instead?
<html>
<head>
<script>
function changeCase(caseType){
	var el = document.getElementById('test');
	if (caseType =='capitalize'){
		el.style.textTransform='capitalize';
	}

	if (caseType =='uppercase'){
		el.style.textTransform='uppercase';
	}

	if (caseType =='lowercase'){
		el.style.textTransform='lowercase';
	}
	return false;
}
</script>
</head>
<body>
<div id="test">This is a test message</div><br/>
<a href="javascript:void(0)" onclick="javascript:changeCase('capitalize');return false">capitalize</a></br>
<a href="javascript:void(0)" onclick="javascript:changeCase('uppercase');">uppercase</a></br>
<a href="javascript:void(0)" onclick="javascript:changeCase('lowercase');">lowercase</a></br>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
zack4x4Author Commented:
I'm dynamically adding inputs into a form I don't think that will work in this case.
0
COBOLdinosaurCommented:
this cannot possible work:
inputE1.style.setattribute("text-transform", 'capitalize');

style does not have a setAttribute method.

You can try:

inputE1.setattribute("style" "text-transform:capitalize",0);


The zero on the end is necessary to turn off IE case-sensitivity.


Cd&
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

COBOLdinosaurCommented:
Ooops a spelling mistake

setAttribute is the correct camel case spelling.

Cd&
0
zack4x4Author Commented:
that didn't work. I tried with Firefox and IE
0
nap0leonCommented:
Sorry it took me awhile to get back to this.  CD& is correct on how you do it for elements that you are adding that are not yet in the DOM.  
inputE1.setAttribute("style","text-transform:capitalize");

Open in new window


Some thoughts on the cross-browser issues...

Testing locally,
It works for FF9, Chrome 16, and Safari 5.1.2
With IE8, it works with both IE8 compatibility and IE8 standards.  It does not work with IE7 or Quirks Mode.

Have you tried creating a style such as  ".initCaps {text-transform:capitalize} and adding it as a second class to the item?

Alternatively, have you tried adding the item you are creating to your DOM then running the code I posted?
0
COBOLdinosaurCommented:
Good idea nap.  When I do dynamic generation, I normally like it in the document object first.  Then modifying styles has very few cross-browser issues.  With forms you have to be careful anyway because it is easy to break them.

zack4x4,

What version if IE are you testing with?  IE8 and 9 should both be able to handle it.  Anything older is probably irrelevant anyway.  


Cd&
0
zack4x4Author Commented:
IE9.  For some reason when I click the add button to activate it nothing happens.  I don't get a javscript error either.  When I remove the line it starts working again...
0
COBOLdinosaurCommented:
Is the element being created correctly?  I should be something like:

inputE1=document.createElement('input');
inputE1.setAttribute("type", "text");

If nothing is working maybe we need to see more of the script.


Cd&
0
nap0leonCommented:
Just as an FYI - here is the code I tested with:
	var firstName = document.createElement("input");
        firstName.setAttribute("type","text");
        firstName.setAttribute("name","name_firstname");
        firstName.setAttribute("id","name_firstname");
        firstName.setAttribute("value","First");
        firstName.setAttribute("class","withDefault");
        firstName.setAttribute("size","15");
        firstName.setAttribute("style","text-transform:uppercase");

Open in new window

0
COBOLdinosaurCommented:
That should work, if nothing else is broken.

Cd&
0
zack4x4Author Commented:
Thanks guys!  I split the points between you to.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.