Jump to content

className & +=


tinfanide
 Share

Recommended Posts

I wanna ask why

clicker.className+=" "+ccn;

instead of

clicker.className = ccn;

What does it mean by

clicker.className = clicker.className + " " + ccn;

Why should it be like this?

<script>function toggleNext(el) 	{	 var next = el.nextSibling;	 while(next.nodeType != 1)	 next = next.nextSibling;	 next.style.display = (next.style.display=="none") ? "block" : "none";	}	function toggleNextById(el) {	 var ccn = "clicker";	 var clicker = document.getElementById(el);	 clicker.className+=" "+ccn;	 clicker.onclick = function() {toggleNext(this)}	 toggleNext(clicker);	}window.onload=function() {toggleNextById('salutation')}</script>

.clicker {cursor:pointer;color:blue;}

<p id="salutation">hi</p><p>there</p>

Link to comment
Share on other sites

It's adding a class to the class list. Say you have a div with a class already defined:

<div class='someClass'>some content in here</div>

When you use clicker.className += " "+ccn you are adding the value of the variable ccn to the class list. In this case ccn holds the string 'clicker' so now the class list for your div would look like this:

<div class='someClass clicker'>some content in here</div>

If there is no class defined on the element it will still take the class 'clicker' because white-space doesn't matter in the class attribute. You could write:

<div class='  clicker	 '>some content in here</div>

And the browser will still interpret it as:

<div class='clicker'>some content in here</div>

If you were to just use clicker.className = ccn you would overwrite already existing classes that may be defined on that element. So with the example above, this:

<div class='someClass'>some content in here</div>

would become:

<div class='picker'>some content in here</div>

Link to comment
Share on other sites

It's adding a class to the class list. Say you have a div with a class already defined:
<div class='someClass'>some content in here</div>

When you use clicker.className += " "+ccn you are adding the value of the variable ccn to the class list. In this case ccn holds the string 'clicker' so now the class list for your div would look like this:

<div class='someClass clicker'>some content in here</div>

If there is no class defined on the element it will still take the class 'clicker' because white-space doesn't matter in the class attribute. You could write:

<div class='  clicker	 '>some content in here</div>

And the browser will still interpret it as:

<div class='clicker'>some content in here</div>

If you were to just use clicker.className = ccn you would overwrite already existing classes that may be defined on that element. So with the example above, this:

<div class='someClass'>some content in here</div>

would become:

<div class='picker'>some content in here</div>

Very clear explanation. Sorry for the 10 mins wasted...I didn't realise I'd produced two identical posts until I read ya post.
Link to comment
Share on other sites

Very clear explanation. Sorry for the 10 mins wasted...I didn't realise I'd produced two identical posts until I read ya post.
:) No worries. Duplicate posts happen all the time. I just need to pay more attention that's all. :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...