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

[Joost Diepenmaat]

Jeff <jeff@spam_me_n ot.comwrites:

Let's say we have this:

<div class="some_cla ss some_other_clas s">

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

If that's a question: yes.

myDiv.className .replace(/\bsome_other_cl ass\b/,"something_els e");

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

[Joost Diepenmaat]

Joost Diepenmaat <jo***@zeekat.n lwrites:

myDiv.className .replace(/\bsome_other_cl ass\b/,"something_els e");

That should ofcourse be:

myDiv.className = myDiv.className .replace(/\bsome_other_cl ass\b/,"something_els e");

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

[SAM]

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.className = what.className. replace(origina l, newOne);
}
</script>
<button onclick="change Class('somewher e','some_other_ class','new_cla ss')">
change 1
</button>
<button onclick="change Class('somewher e','some_class' ,'new_other_cla ss')">
change 2
</button>

--
sm

[Evertjan.]

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.className = what.className. replace(origina l, newOne);
}
</script>
<button
onclick="change Class('somewher e','some_other_ class','new_cla ss')">
change 1 </button>
<button
onclick="change Class('somewher e','some_class' ,'new_other_cla ss')">
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.

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

[Joost Diepenmaat]

"Evertjan." <ex************ **@interxnl.net writes:

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.n lwrites:

>myDiv.classNam e.replace(/\bsome_other_cl ass\b/,"something_els e");

That should ofcourse be:

myDiv.className = myDiv.className .replace(/\bsome_other_cl ass\b/,"something_els e");

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_n ot.comwrote:

Joost Diepenmaat wrote:

Joost Diepenmaat <jo...@zeekat.n lwrites:

myDiv.className .replace(/\bsome_other_cl ass\b/,"something_els e");

That should ofcourse be:

myDiv.className = 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 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. 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.javas cript:

"Evertjan." <ex************ **@interxnl.net writes:

>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="largeFon t submitButton"he lps
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