changing multiple classnames

[Jeff]

Let's say we have this:

<div class="some_cla ss some_other_clas s">

Is it possible to change *one* of the classnames.

Jeff

[Jeff]

RobG wrote:

On Jul 15, 8:45 am, Jeff <jeff@spam_me_n ot.comwrote:

>Joost Diepenmaat wrote:

>>Joost Diepenmaat <jo...@zeekat.n lwrites:
myDiv.classN ame.replace(/\bsome_other_cl ass\b/,"something_els e");
That should ofcourse be:
myDiv.classNa me = myDiv.className .replace(/\bsome_other_cl ass\b/,"something_els e");

Perfect!

No, it's not. The class attribute value delimiter is one or more
whitespace characters, so a pattern should be used that matches that.
\b matches a word break which includes whitespace, but there are
characters that a javascript regexp recognises as a word break that
are not designated as class attribute value delimiters, such as hyphen
(-) and period (.). A better match is (^|\s)some_clas s(\s|$).

That's a good point. It's just occurred to me that I've never used \b
and hadn't thought of it matching "-", nor did I know you could do this:
(^|\s), I probably would have done \s*

>
That will also remove some or all of the whitespace around the value
when replacing it, so pad the replacement string with spaces:

myDiv.className =
myDiv.className .replace(/(^|\s+)some_cla ss(\s+|$)/,"
something_else ");
Extra whitespace may now be inserted in the class attribute that some
browsers will not automatically trim.

Is there a problem with doing this?:

myDiv.className .replace(/\s*some_class\s */," something_else ")
If you want, you can follow it

up with a trimming function that removes leading and trailing
whitespace, the \s+ should ensure there is no extra internal
whitespace.

The additional whitespace shouldn't be an issue unless you are doing
lots (hundreds?) of replacements for a particular element without re-
loading the page,

Hmmm, is there a practical character limit for the classname attribute?

Jeff
however I think it is better to deal with it from

the start, so append:

.replace(/^\s+|\s+$/g,'')
or whatever your favourite trimming pattern is.
--
Rob

[Jeff]

Evertjan. wrote:

SAM wrote on 15 jul 2008 in comp.lang.javas cript:

>Jeff a écrit :

>> Let's say we have this:

<div class="some_cla ss some_other_clas s">

Is it possible to change *one* of the classnames.

<div id="somewhere" class="some_cla ss some_other_clas s">
<script type="text/javascript">
function changeClass(wha t, original, newOne) {
what = document.getEle mentById(what);
what.classNa me = what.className. replace(origina l, newOne);
}
</script>
<button
onclick="chang eClass('somewhe re','some_other _class','new_cl ass')">
change 1 </button>
<button
onclick="chang eClass('somewhe re','some_class ','new_other_cl ass')">
change 2 </button>

This fails here:

<div class='myClass2 myClass' id='myId'>

onclick="change Class('myId','m yClass','myClas s3')">

The regex replace with word boundaries is safer.

======

My idea is that the whole multiple class method is error prone,
I never use it anymore.

What errors would that be?

I rarely use multiple classes, but for somethings they are perfect.

If your classes are doing completely different things, without
overlapping properties it can be a neat trick. Particularly if you can
simplify the html by doing so (in my case avoiding a wrapper div).

I personally like having as few classes as possible, I think we've
all seen stylesheets that were loaded down.

Jeff

>

[Evertjan.]

Jeff wrote on 15 jul 2008 in comp.lang.javas cript:

I wrote:

>My idea is that the whole multiple class method is error prone,
I never use it anymore.

What errors would that be?

I rarely use multiple classes, but for somethings they are perfect.

If your classes are doing completely different things, without
overlapping properties it can be a neat trick. Particularly if you can
simplify the html by doing so (in my case avoiding a wrapper div).

You answer yourself "If ...."

That is the general answer to "error prone":
"Bit if you make no mistakes, ...."

The thread was about dynamicly changing one class in an multiple class
element. Here the chances of an error multiply.

>
I personally like having as few classes as possible, I think we've
all seen stylesheets that were loaded down.

Does that contracivt my stand?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Jeff]

Evertjan. wrote:

Jeff wrote on 15 jul 2008 in comp.lang.javas cript:

I wrote:

>>My idea is that the whole multiple class method is error prone,
I never use it anymore.

What errors would that be?

I rarely use multiple classes, but for somethings they are perfect.

If your classes are doing completely different things, without
overlapping properties it can be a neat trick. Particularly if you can
simplify the html by doing so (in my case avoiding a wrapper div).

You answer yourself "If ...."

That is the general answer to "error prone":
"Bit if you make no mistakes, ...."

The thread was about dynamicly changing one class in an multiple class
element. Here the chances of an error multiply.

Well, in my mind there is a difference between an error and creating a
mess. I can certainly see how this could be a mess, I don't see how it
would throw an error. Unless I misunderstand, I'd like to know.

>

> I personally like having as few classes as possible, I think we've
all seen stylesheets that were loaded down.

Does that contracivt my stand?

Not at all...
I'm not trying to be argumentative, if there's something I'm missing I'd
like to know. If we just have a symantic mixup... Or perhaps you are
referring to your regex not matching what you expect? Or one class
stepping on another's definitions and not yielding the correct styles?
The more I think of this, I think that's what you must mean.

I'm still pretty happy as it never occurred to me that className
would refer to the whole string, I was thinking it might be in an array,
or not available at all! For my case, it eliminates the need for a
wrapper div, I might never need it again.
Jeff

>

[Evertjan.]

Jeff wrote on 15 jul 2008 in comp.lang.javas cript:

>The thread was about dynamicly changing one class in an multiple class
element. Here the chances of an error multiply.

Well, in my mind there is a difference between an error and creating a
mess. I can certainly see how this could be a mess, I don't see how it
would throw an error. Unless I misunderstand, I'd like to know.

"throw an error"?

"error prone" is not confined to a execution errors,
you can also make errors in programming.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)