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]

Re: changing multiple classnames

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]

Re: changing multiple classnames

Joost Diepenmaat <joost@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]

Re: changing multiple classnames

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.]

Re: changing multiple classnames

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]

Re: changing multiple classnames

"Evertjan." <exjxw.hannivoo rt@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]

Re: changing multiple classnames

Joost Diepenmaat wrote:

Joost Diepenmaat <joost@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]

Re: changing multiple classnames

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.]

Re: changing multiple classnames

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

"Evertjan." <exjxw.hannivoo rt@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]

Re: changing multiple classnames

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

[Jeff]

Re: changing multiple classnames

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]

Re: changing multiple classnames

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.]

Re: changing multiple classnames

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]

Re: changing multiple classnames

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.]

Re: changing multiple classnames

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)