changing multiple classnames

[Jeff]

Let's say we have this:

<div class="some_class some_other_class">

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

Jeff

[Joost Diepenmaat]

Jeff <jeff@spam_me_not.comwrites:

Let's say we have this:

<div class="some_class some_other_class">

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

If that's a question: yes.

myDiv.className.replace(/\bsome_other_class\b/,"something_else");

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

[Joost Diepenmaat]

Joost Diepenmaat <jo***@zeekat.nlwrites:

myDiv.className.replace(/\bsome_other_class\b/,"something_else");

That should ofcourse be:

myDiv.className = myDiv.className.replace(/\bsome_other_class\b/,"something_else");

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

[SAM]

Jeff a écrit :

Let's say we have this:

<div class="some_class some_other_class">

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

<div id="somewhere" class="some_class some_other_class">
<script type="text/javascript">
function changeClass(what, original, newOne) {
what = document.getElementById(what);
what.className = what.className.replace(original, newOne);
}
</script>
<button onclick="changeClass('somewhere','some_other_class ','new_class')">
change 1
</button>
<button onclick="changeClass('somewhere','some_class','new _other_class')">
change 2
</button>

--
sm

[Evertjan.]

SAM wrote on 15 jul 2008 in comp.lang.javascript:

Jeff a écrit :

> Let's say we have this:

<div class="some_class some_other_class">

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

<div id="somewhere" class="some_class some_other_class">
<script type="text/javascript">
function changeClass(what, original, newOne) {
what = document.getElementById(what);
what.className = what.className.replace(original, newOne);
}
</script>
<button
onclick="changeClass('somewhere','some_other_class ','new_class')">
change 1 </button>
<button
onclick="changeClass('somewhere','some_class','new _other_class')">
change 2 </button>

This fails here:

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

onclick="changeClass('myId','myClass','myClass3')" >

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.

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

[Joost Diepenmaat]

"Evertjan." <ex**************@interxnl.netwrites:

My idea is that the whole multiple class method is error prone,

it is

I never use it anymore.

but it can be very useful.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

[Jeff]

Joost Diepenmaat wrote:

Joost Diepenmaat <jo***@zeekat.nlwrites:

>myDiv.className.replace(/\bsome_other_class\b/,"something_else");

That should ofcourse be:

myDiv.className = myDiv.className.replace(/\bsome_other_class\b/,"something_else");

Perfect!

As a former Perl guy, any time you can use a regex is a good time!

Jeff

[RobG]

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

Joost Diepenmaat wrote:

Joost Diepenmaat <[e-mail]:

myDiv.className.replace(/\bsome_other_class\b/,"something_else");

That should ofcourse be:

myDiv.className = myDiv.className.replace(/\bsome_other_class\b/,"something_else");

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_class(\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_class(\s+|$)/,"
something_else ");
Extra whitespace may now be inserted in the class attribute that some
browsers will not automatically trim. 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, 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

[Evertjan.]

Joost Diepenmaat wrote on 15 jul 2008 in comp.lang.javascript:

"Evertjan." <ex**************@interxnl.netwrites:

>My idea is that the whole multiple class method is error prone,

it is

>I never use it anymore.

but it can be very useful.

Many dangerous things are,
otherwise their danger would not be important.

So, don't use it in a complex situation.
And why use it in a simple one, where you can easily do without?

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

[Gregor Kofler]

Evertjan. meinte:

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

Why? Never experienced any "errors" due to multiple classes. On the
contrary it is in some cases *extremely* useful. Something like <td
class="checkSum error"or <input class="largeFont submitButton"helps
to keep the CSS short and flexible. I use it extensively with my
dynamically created JS widgets to "attach" extra information to DOM
elements, too.

Gregor
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

[Jeff]

RobG wrote:

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

>Joost Diepenmaat wrote:

>>Joost Diepenmaat <[e-mail]:
myDiv.className.replace(/\bsome_other_class\b/,"something_else");
That should ofcourse be:
myDiv.className = myDiv.className.replace(/\bsome_other_class\b/,"something_else");

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_class(\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_class(\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.javascript:

>Jeff a écrit :

>> Let's say we have this:

<div class="some_class some_other_class">

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

<div id="somewhere" class="some_class some_other_class">
<script type="text/javascript">
function changeClass(what, original, newOne) {
what = document.getElementById(what);
what.className = what.className.replace(original, newOne);
}
</script>
<button
onclick="changeClass('somewhere','some_other_clas s','new_class')">
change 1 </button>
<button
onclick="changeClass('somewhere','some_class','ne w_other_class')">
change 2 </button>

This fails here:

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

onclick="changeClass('myId','myClass','myClass3')" >

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.javascript:

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.javascript:

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.javascript:

>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)