473,695 Members | 2,492 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How Does JavaScript Call Forth CSS??


Okay, Folks,

I guess my real burning concern all along is a "high-level" one: just
how does JavaScript interact with CSS?

Right now, my newbie self only knows JavaScript and CSS to *co-
exist*...but I'm beginning to get the sense that they actually
interact -- or, perhaps more precisely, JavaScript acts upon CSS...but
how, exactly??

I see how JavaScript acts upon HTML, but I'm not so sure where
JavaScript acts upon CSS...moreover, I want to see where they could
create whole new browsing experiences, beyond simply new text and new
images (though I'm only just beginning at the level of new ways of
presenting text and images)....

How do I go about all this?? Ugh, I hope all those $$$ worth of books
will help...so far, I'm learning very basic things which I actually
wouldn't use (though the learning itself is fun), while the things I
would like to do, I either don't have the technical know-how for it or
I don't have the creative imagination to bring together what little I
do know -- sigh!!
Jun 27 '08 #1
19 1730
"Prisoner at War" <pr************ *@yahoo.comwrot e in message
news:c8******** *************** ***********@m44 g2000hsc.google groups.com...
>
Okay, Folks,

I guess my real burning concern all along is a "high-level" one: just
how does JavaScript interact with CSS?

Right now, my newbie self only knows JavaScript and CSS to *co-
exist*...but I'm beginning to get the sense that they actually
interact -- or, perhaps more precisely, JavaScript acts upon CSS...but
how, exactly??

I see how JavaScript acts upon HTML, but I'm not so sure where
JavaScript acts upon CSS...moreover, I want to see where they could
create whole new browsing experiences, beyond simply new text and new
images (though I'm only just beginning at the level of new ways of
presenting text and images)....

How do I go about all this?? Ugh, I hope all those $$$ worth of books
will help...so far, I'm learning very basic things which I actually
wouldn't use (though the learning itself is fun), while the things I
would like to do, I either don't have the technical know-how for it or
I don't have the creative imagination to bring together what little I
do know -- sigh!!
Basically, you get the element in Javascript, and set its style property.

<div id="content">bl ah</div>

javascript:

var contentDiv = document.getEle mentById( "content" );
contentDiv.styl e.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.

Jun 27 '08 #2
[Cross-posting snipped.]

On Sat, 26 Apr 2008 16:53:33 -0700, Prisoner at War wrote:
Okay, Folks,

I guess my real burning concern all along is a "high-level" one: just
how does JavaScript interact with CSS?

Right now, my newbie self only knows JavaScript and CSS to *co-
exist*...but I'm beginning to get the sense that they actually interact
-- or, perhaps more precisely, JavaScript acts upon CSS...but how,
exactly??

I see how JavaScript acts upon HTML, but I'm not so sure where
JavaScript acts upon CSS...moreover, I want to see where they could
create whole new browsing experiences, beyond simply new text and new
images (though I'm only just beginning at the level of new ways of
presenting text and images)....
Javascript is a programming language. A simple but useful one.
Javascript, *BY ITS SELF* can not interact with anything.

Style sheets are a set of hints that direct a user agent over how
information should be displayed.

Both Javascript and CSS co-exist in the user agent, typically a web
browser.

(In addition there is a third important player to this game called the
DOM [Document Object Model]. The DOM gives Javascript a way to interact
with the host environment.)
How do I go about all this?? Ugh, I hope all those $$$ worth of books
will help...so far, I'm learning very basic things which I actually
wouldn't use (though the learning itself is fun), while the things I
would like to do, I either don't have the technical know-how for it or I
don't have the creative imagination to bring together what little I do
know -- sigh!!
I don't know any of the Javascript books, but I don't hear any of them
mentioned highly around here. I've learned a lot by lurking the
newsgroup here and the FAQ's.

Javascript may call DOM functions. Those functions, in turn, may update
the 'page' by replacing elements, adding elements, moving or unhiding.
In short, making a site interactive.
Start off reading the group's FAQ. That will give you a good solid
background in some of the more important aspects of Javascript.
When Googling for example code, keep in mind that 90% of everything is
crap. I got bit pretty heavily by learning from some bad examples and
put together a guide to help others avoid my mistake. Might help you.

http://www.mopedepot.com/jjs/HowToRe...criptCode.html

(Hmmm.. I still haven't uploaded the final version of that. That one is
fairly good though.)


Jun 27 '08 #3
On 2008-04-27, Nik Coughlin <nr******@gmail .comwrote:
"Prisoner at War" <pr************ *@yahoo.comwrot e in message
news:c8******** *************** ***********@m44 g2000hsc.google groups.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">bl ah</div>

javascript:

var contentDiv = document.getEle mentById( "content" );
contentDiv.styl e.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.setA ttribute("class ", "active")
Jun 27 '08 #4
Ben C wrote:
On 2008-04-27, Nik Coughlin <nr******@gmail .comwrote:
>"Prisoner at War" <pr************ *@yahoo.comwrot e in message
news:c8******* *************** ************@m4 4g2000hsc.googl egroups.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">bl ah</div>

javascript:

var contentDiv = document.getEle mentById( "content" );
contentDiv.sty le.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.setA ttribute("class ", "active")
Yeah, be careful doing this though. Imagine you've got:
<div id="contentDiv " class="class1 class2 inactive">bhakj fh</div>

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

contentDiv.setA ttribute("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.clas sName instead
to get an array of class names, then replace inactive with active, glue the
strings in the array back together and reassign it
Jun 27 '08 #5
On Apr 27, 6:21*am, "Nik Coughlin" <nrkn....@gmail .comwrote:
Yeah, be careful doing this though. *Imagine you've got:
<div id="contentDiv " class="class1 class2 inactive">bhakj fh</div>

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

contentDiv.setA ttribute("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.clas sName 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
}
Jun 27 '08 #6
Garmt de Vries wrote on 27 apr 2008 in comp.lang.javas cript:
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.clas sName))
? this.className. replace(/active/,'passive')
: this.className. replace(/passive/,'active');
};

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jun 27 '08 #7
On Apr 27, 4:21 am, "Nik Coughlin" <nrkn....@gmail .comwrote:
Ben C wrote:
On 2008-04-27, Nik Coughlin <nrkn....@gmail .comwrote:
"Prisoner at War" <prisoner_at_.. .@yahoo.comwrot e in message
news:c8******* *************** ************@m4 4g2000hsc.googl egroups.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">bl ah</div>
javascript:
var contentDiv = document.getEle mentById( "content" );
contentDiv.styl e.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.setA ttribute("class ", "active")

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

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

contentDiv.setA ttribute("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.clas sName 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
Jun 27 '08 #8
Prisoner at War wrote:
Okay, Folks,

I guess my real burning concern all along is a "high-level" one: just
how does JavaScript interact with CSS?
Depends on what level of "interactio n" you're specifying. Direct
manipulation of style rules is handled by something called the `CSS
Object Model' (still a WIP, IIRC); but computed style rules can be
affected by DOM mutations. It is the latter that is more often the case.
Right now, my newbie self only knows JavaScript and CSS to *co-
exist*...but I'm beginning to get the sense that they actually
interact -- or, perhaps more precisely, JavaScript acts upon CSS...but
how, exactly??

I see how JavaScript acts upon HTML, but I'm not so sure where
JavaScript acts upon CSS...moreover, I want to see where they could
create whole new browsing experiences, beyond simply new text and new
images (though I'm only just beginning at the level of new ways of
presenting text and images)....
In short, most JavaScript tends to act on CSS only by proxy through the
HTML. In my code, I generally modify styles by changing the classes of
elements.

P.S. The `DOM', or `Document Object Model', is the precise specification
that most people think of when the think of JavaScript; any time you're
dynamically modify DOM (e.g. through document.getEle mentByID), you're
actually using the DOM. Most literature tends to gloss over this
distinction.

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth
Jun 27 '08 #9
Garmt de Vries wrote:
On Apr 27, 6:21 am, "Nik Coughlin" <nrkn....@gmail .comwrote:
>Yeah, be careful doing this though. Imagine you've got:
<div id="contentDiv " class="class1 class2 inactive">bhakj fh</div>

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

contentDiv.set Attribute("clas s", "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.clas sName 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.
Jun 27 '08 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
1903
by: Fendi Baba | last post by:
The function is called from opencalendar(targetfield). Thanks for any hints on what could be the problem. .............................................................. var decimalPointDelimiter = ".";
4
2066
by: Guillaume CABANAC | last post by:
Hi everybody, Does anybody know how to access a remote database (say Oracle) from JavaScript code (within a Firefox Extension) ? I know ADO via ActiveX in the IE world and think a similar thing exists in Firefox. Thanks a lots,
3
12871
by: Angel | last post by:
Hi, I have a page which shows a matrix of names and grades for given period. All the grades fields must be editable and they can be up to 200 fields (20 students with 10 grades each) Since there are a lots of fields I do not want to go back and forth to validate entered values on any change. I decided that this may be achieved with some JavaScript functions to validate some controls and to calculate average and total values of other...
7
1411
by: endlesstide | last post by:
If I have two functions, and want to toggle back and forth between 1 and 2 from an onclick event.... how would I parse that? Thanks mucho <script> javascript function1() { something1....
1
3415
by: tshad | last post by:
I need to do some work with Javascript and my datagrid controls. I want to do something like: ********************************************************* function CheckQuestion() { var checkBox = document.getElementById('_ctl0_SecurityStandard'); if (checkBox.checked) { dropDown = document.getElementById('_ctl0_SecretQuestion');
1
2491
by: Eric Capps | last post by:
This may be more of a Java question, but I feel that JavaScript experts may be more qualified to help me find a solution. In short: is it possible to call a Java method from JavaScript, passing as an argument a JavaScript array (in my case, an array of doubles)? Supposing I have array x containing only doubles, I have tried: document.MyApplet.myMethod(x); But the method only ever seems to receive "null" as an argument.
4
4040
by: Java Guy | last post by:
I can find a lot of stuff on the internet about javascript, except how to I determine which version my IE6 is compatible with, or where to download javascript plugin/engine/what-ever for Windows (windows 98 se specifically). Basically, I don't write java or javascript code, but I want to update or tweak or fix how IE is handling javascript on my system currently. Where do I get that "stuff" ???
34
2518
by: -Lost | last post by:
I'm REALLY liking this so far. And for those who welcome something a little less cryptic than what the resident date guru offers, here's a chance to try something fairly elegant and definitely unique. http://www.datejs.com/ -- -Lost Remove the extra words to reply by e-mail. Don't e-mail me. I am kidding. No I am not.
16
1784
by: Prisoner at War | last post by:
Okay, Folks, I guess my real burning concern all along is a "high-level" one: just how does JavaScript interact with CSS? Right now, my newbie self only knows JavaScript and CSS to *co- exist*...but I'm beginning to get the sense that they actually interact -- or, perhaps more precisely, JavaScript acts upon CSS...but how, exactly??
0
8649
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9004
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8864
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7683
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5842
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4351
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4592
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2289
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1986
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.