Re: How Does JavaScript Call Forth CSS??

On 2008-04-27, Nik Coughlin <nrkn.com (AT) gmail (DOT) com> wrote:

"Prisoner at War" <prisoner_at_war (AT) yahoo (DOT) com> wrote in message
news:c86208c9-45fb-4419-acb6-6d62c94d4ef0 (AT) m44g2000hsc (DOT) googlegroups.com...

Okay, Folks,

I guess my real burning concern all along is a "high-level" one: just
how does JavaScript interact with CSS?
[...]
Basically, you get the element in Javascript, and set its style property.

div id="content">blah</div

javascript:

var contentDiv = document.getElementById( "content" );
contentDiv.style.marginLeft = "1em";

Generally (there may be exceptions but I'm not aware of any) the property of
the object corresponds to the name of the CSS property but camel cased.

Yes. Another way to do it is to change the class attributes of elements
with setAttribute.

Then you can organize the styles in style sheets rather than packing
them all into the elements' style attributes, and just switch the
elements' classes so they get selected by different selectors.

This kind of thing:

..active
{
border: 2px solid red;
background-color: yellow;
color: black;
etc.
..
}

contentDiv.setAttribute("class", "active")

Ben C wrote:

On 2008-04-27, Nik Coughlin <nrkn.com (AT) gmail (DOT) com> wrote:
"Prisoner at War" <prisoner_at_war (AT) yahoo (DOT) com> wrote in message
news:c86208c9-45fb-4419-acb6-6d62c94d4ef0 (AT) m44g2000hsc (DOT) googlegroups.com...

Okay, Folks,

I guess my real burning concern all along is a "high-level" one:
just how does JavaScript interact with CSS?
[...]
Basically, you get the element in Javascript, and set its style
property.

div id="content">blah</div

javascript:

var contentDiv = document.getElementById( "content" );
contentDiv.style.marginLeft = "1em";

Generally (there may be exceptions but I'm not aware of any) the
property of the object corresponds to the name of the CSS property
but camel cased.


Yes. Another way to do it is to change the class attributes of
elements with setAttribute.

Then you can organize the styles in style sheets rather than packing
them all into the elements' style attributes, and just switch the
elements' classes so they get selected by different selectors.

This kind of thing:

.active
{
border: 2px solid red;
background-color: yellow;
color: black;
etc.
..
}

contentDiv.setAttribute("class", "active")

Yeah, be careful doing this though. Imagine you've got:
<div id="contentDiv" class="class1 class2 inactive">bhakjfh</div>

You want to switch between active and inactive and you do:

contentDiv.setAttribute("class", "active")

and suddenly it's:

<div id="contentDiv" class="active">bhakjfh</div>

Whereas what you really want is:

<div id="contentDiv" class="class1 class2 active">bhakjfh</div>

So you probably want to use the split method on contentDiv.className instead
to get an array of class names, then replace inactive with active, glue the
strings in the array back together and reassign it

On Apr 27, 6:21*am, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:

Yeah, be careful doing this though. *Imagine you've got:
div id="contentDiv" class="class1 class2 inactive">bhakjfh</div

You want to switch between active and inactive and you do:

contentDiv.setAttribute("class", "active")

and suddenly it's:

div id="contentDiv" class="active">bhakjfh</div

Whereas what you really want is:

div id="contentDiv" class="class1 class2 active">bhakjfh</div

So you probably want to use the split method on contentDiv.className instead
to get an array of class names, then replace inactive with active, glue the
strings in the array back together and reassign it

Or do:

function activate_item(){
this.className=this.className.replace(/passive/,'active'); // change
passive to active
}

function passivate_item(){
this.className=this.className.replace(/active/,'passive'); // change
active to passive
}

Garmt de Vries wrote on 27 apr 2008 in comp.lang.javascript:

Or do:

function activate_item(){
this.className=this.className.replace(/passive/,'active'); // change
passive to active
}

function passivate_item(){
this.className=this.className.replace(/active/,'passive'); // change
active to passive
}

Perhaps:

function toggle_item(){
this.className=
(/active/.test(this.className))
? this.className.replace(/active/,'passive')
: this.className.replace(/passive/,'active');
};

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

On Apr 27, 4:21 am, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:

Ben C wrote:
On 2008-04-27, Nik Coughlin <nrkn.... (AT) gmail (DOT) com> wrote:
"Prisoner at War" <prisoner_at_... (AT) yahoo (DOT) com> wrote in message
news:c86208c9-45fb-4419-acb6-6d62c94d4ef0 (AT) m44g2000hsc (DOT) googlegroups.com...

Okay, Folks,

I guess my real burning concern all along is a "high-level" one:
just how does JavaScript interact with CSS?
[...]
Basically, you get the element in Javascript, and set its style
property.

div id="content">blah</div

javascript:

var contentDiv = document.getElementById( "content" );
contentDiv.style.marginLeft = "1em";

Generally (there may be exceptions but I'm not aware of any) the
property of the object corresponds to the name of the CSS property
but camel cased.

Yes. Another way to do it is to change the class attributes of
elements with setAttribute.

Then you can organize the styles in style sheets rather than packing
them all into the elements' style attributes, and just switch the
elements' classes so they get selected by different selectors.

This kind of thing:

.active
{
border: 2px solid red;
background-color: yellow;
color: black;
etc.
..
}

contentDiv.setAttribute("class", "active")

Yeah, be careful doing this though. Imagine you've got:
div id="contentDiv" class="class1 class2 inactive">bhakjfh</div

You want to switch between active and inactive and you do:

contentDiv.setAttribute("class", "active")

and suddenly it's:

div id="contentDiv" class="active">bhakjfh</div

Whereas what you really want is:

div id="contentDiv" class="class1 class2 active">bhakjfh</div

So you probably want to use the split method on contentDiv.className instead
to get an array of class names, then replace inactive with active, glue the
strings in the array back together and reassign it

It's probably best to use reusable code for operations like this, and
fortunately all of the major JS frameworks include this. The
following URL provides a good summary of this:

http://www.openjs.com/scripts/dom/cl...nipulation.php

Garmt de Vries wrote:

On Apr 27, 6:21 am, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:
Yeah, be careful doing this though. Imagine you've got:
div id="contentDiv" class="class1 class2 inactive">bhakjfh</div

You want to switch between active and inactive and you do:

contentDiv.setAttribute("class", "active")

and suddenly it's:

div id="contentDiv" class="active">bhakjfh</div

Whereas what you really want is:

div id="contentDiv" class="class1 class2 active">bhakjfh</div

So you probably want to use the split method on contentDiv.className instead
to get an array of class names, then replace inactive with active, glue the
strings in the array back together and reassign it

Or do:

function activate_item(){
this.className=this.className.replace(/passive/,'active'); // change
passive to active
}

function passivate_item(){
this.className=this.className.replace(/active/,'passive'); // change
active to passive
}

While easier to program, the downside to this as a general approach is
that you can wind up changing things you didn't mean to change.

class="one alone"

Replace class "one" with class "two":

class="two altwo"

which is probably not what was intended.

"Harlan Messinger" <hmessinger.removethis (AT) comcast (DOT) net> wrote

Or do:

function activate_item(){
this.className=this.className.replace(/passive/,'active'); // change
passive to active
}

function passivate_item(){
this.className=this.className.replace(/active/,'passive'); // change
active to passive
}

While easier to program, the downside to this as a general approach is
that you can wind up changing things you didn't mean to change.

class="one alone"

Replace class "one" with class "two":

class="two altwo"

which is probably not what was intended.

Yep but you can match regular expressions against whole words only which
would avoid that issue

On Apr 29, 3:36 pm, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:

"Harlan Messinger" <hmessinger.removet... (AT) comcast (DOT) net> wrote in message

news:67osepF2q55i5U2 (AT) mid (DOT) individual.net...



Or do:

function activate_item(){
this.className=this.className.replace(/passive/,'active'); // change
passive to active
}

function passivate_item(){
this.className=this.className.replace(/active/,'passive'); // change
active to passive
}

While easier to program, the downside to this as a general approach is
that you can wind up changing things you didn't mean to change.

class="one alone"

Replace class "one" with class "two":

class="two altwo"

which is probably not what was intended.

Yep but you can match regular expressions against whole words only which
would avoid that issue

And that is something that was discussed on DHTML Central about 6
years ago. The first approach is the basic idea, but doesn't work, as
Harlan pointed out.

The pattern "(^|\\s)"+token+"($|\\s)" has been adopted by all the
libraries and further optimized to use non-capturing groups. The
pattern is now: new RegExp("(?:^|\\s)"+token+"(?:$|\\s)");

It can be a performance boost to cache the patterns (though only if
the cache is used). YUI seems to have discovered this, too.

Basic idea is that it's faster to get an object from a cache than
create one, even if it means an extra function call.
http://www.dhtmlkitchen.com/learn/js...exp-cache.html

http://www.dhtmlkitchen.com/ape/buil...classname-f.js

Garrett

On Apr 27, 2:20 pm, "david.karr" <davidmichaelk... (AT) gmail (DOT) com> wrote:

It's probably best to use reusable code for operations like this, and
fortunately all of the major JS frameworks include this. The
following URL provides a good summary of this:

http://www.openjs.com/scripts/dom/cl...nipulation.php

Cool, thanks! I'd actually managed to google up JQuery but I wasn't
sure about JavaScript "libraries" and all that....

On Apr 30, 6:59 pm, Prisoner at War <prisoner_at_... (AT) yahoo (DOT) com> wrote:

On Apr 27, 2:20 pm, "david.karr" <davidmichaelk... (AT) gmail (DOT) com> wrote:



It's probably best to use reusable code for operations like this, and
fortunately all of the major JS frameworks include this. The
following URL provides a good summary of this:

http://www.openjs.com/scripts/dom/cl...nipulation.php

Wow, I guess libraries are still using capturing groups. I thought it
was pretty common knowledge to use non-capturing groups. They've got
that right in the tutorial and I can even see in Prototype JS:

removeClassName: function(element, className) {
if (!(element = $(element))) return;
element.className = element.className.replace(
new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').strip();
return element;
}

A capturing group stores the whitespace:
(\\s+|$)

A non-capturing group does not:
(?:\\s+|$)

It is less efficient to use a capturing group.
A capturing group increases the count of the backreference number, so
for more complicated expressions, it would be harder to keep track of
which group is which number, e.g. \1 or $1.

It would actually be possible to make the Prototype JS function even
less efficient by adding the batch() functionality of YUI. But I'd
have to day they've done a pretty bad for a major library. The
assignment in the conditional, the extra call to $(), the capturing
regexp (^|\\s+), the misnaming of trim() as "strip()" (and the adding
of this misnamed trim() function to String.prototype).

At first guess, it seems that Prototype JS's "strip()" is a
normalize() function, but it's not. It's a trim() function, misnamed.
trim() (or strip()) doesn't wipe out the whitespace in the middle, so
you end up with "foo bar baz quux" -> remove "bar" -> "foo baz quux" -

remove "baz -> "foo quux". The add

It's quite surprising to see such code in such a popular library, at
least to me.

In takinga look at jQuery, i find another algorithm that is even
slower. So I have to take back what I said above about "the only thing
that could make the Prototype JS function slower". I didn't think
about the jQuery approach. Create a method "addClass" that delegates
to className.add, which splits the classname to an array, then uses an
each() function, then inside that function, check to make sure the
nodeType is 1.

Here it is:
http://code.jquery.com/jquery-latest.js

className: {
// internal only, use addClass("class")
add: function( elem, classNames ) {
jQuery.each((classNames || "").split(/\s+/), function(i, className)
{
if ( elem.nodeType == 1 && !jQuery.className.has( elem.className,
className ) )
elem.className += (elem.className ? " " : "") + className;
});
},


The function is intended to be called on a Decorated collection, which
would mean an extra call to each(). In most cases, that could be
replaced by adding a fragment identifier to the css file, and then
adding a class to the ancestor.

..window .link {}

/* adding a class to .window object's changes the links */
..window-raised .link { color: red }

/* jQuery tends to encourage this instead */
..window .link-active { color: red }

Cool, thanks! I'd actually managed to google up JQuery but I wasn't
sure about JavaScript "libraries" and all that....

I'm not so sure about those JavaScript libraries, either.