| Topic : Patterns for Integrating Java and JavaScript Technology |
|
|
|
||
|
Source : http://rockingjava.blogspot.com
Activity:
2 comments
480 views
last activity : 07 06 2010 20:18:04 +0000
|
||
|
|
HI friends this is my first post
Alright today we want talk about change a CSS rule dynamically via javascript
ok we have 2 way to do it
1:an non-standard way,(i mean not cool for a developers)
2:Strong & standard way (but not work in any IE version)
first way:
OK lets start for first way
in first way we should count <a> tags in document and then change the each style attribute one by one
so suppose that our default document has a CSS rule with this structure
<style type="text/css">
a{font-family:monospace;color:#0099dd;}
</style>
&& now we want change the each <a> color tags to something like "#ee1166"
Alright we can use this js function to do it
check this out
function changeA(){
var t=document.getElementsByTagName('a').length;
for(var i=0;i<parseInt(t);i++){
document.getElementsByTagName('a')[i].style.color="#11cc22";
}
}
in code
at the first search for <a> elements and count them then in a for loop change the color of each one
So we have a bad problem here and what is this?
OK suppose that we will have to add some new <a> to document (create <a> dynamic)
OK now we can do it with this guy
function addA(){
var elem = document.createElement('a');
var br=document.createElement("br");
elem.innerHTML="We Well Rock you";
document.getElementById('link').appendChild(elem);
document.getElementById('link').appendChild(br);
}
now if you use both of the functions in a document you will see have a big problem
and now put them all together
so for understanding copy this code in a blank HTML document and run it with your browser (such as FF)
<!--
ArAsh.D by NetBeans 6.5
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>bad a change</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
a{font-family:monospace;color:#0099dd;}
</style>
<script type="text/javascript" >
function changeA(){
var t=document.getElementsByTagName('a').length;
for(var i=0;i<parseInt(t);i++){
document.getElementsByTagName('a')[i].style.color="#11cc22";
}
}
function addA(){
var elem = document.createElement('a');
var br=document.createElement("br");
elem.innerHTML="We Well Rock you";
document.getElementById('link').appendChild(elem);
document.getElementById('link').appendChild(br);
}
</script>
</head>
<body>
<div>
<span>this is a normal text and<br/><a> this is a link</a><br/>
so we want change the 'a's tags color<br/>
so now we ahve a lot of 'a' here:<br/>
<span id="link">
<a>Slipnot</a><br/>
<a>Machine head</a><br/>
<a>linkin park</a><br/>
<a>evanecensce</a><br/>
<a>AC/DC</a><br/>
<a>elvis</a><br/></span><br/>
so now press the "change" button to change the color of 'a's to another
AND press the "add link" button for add new link to the document
</span><br/>
<input type="button" value="change" onclick="changeA()" /><br/>
<input type="button" value="add" onclick="addA()" />
</div>
</body>
</html>
Alright you saw that we have bad problem here and this is
when you click on change you see the change but after the add a link you see that new link has old CSS style color
OK you saw that this method not cool
Now lets start with second way to change CSS rule
2:) cool way
NOTE: this method can not work in IE6-7, so please forget IE and download FireFox or Google chrome
Alright so look a bit in the fundamental of both way and extra features in way no.2
in first way we count a tags and change each tag color, it means our CSS rule has old rule still and in add new tags browser use of old rules
in second way: OK look when you load a page, it means that CSS rules is in your system (client-side) so you can access to it and change the rules of base
OK
like previous system we have a CSS rule like this
<style type="text/css">
a{font-family:monospace;color:#0099dd;}
</style>
and now we have method for change the CSS rule (no each <a> tag rule)
this is
function changeCSS(){
document.styleSheets[0].cssRules[0].style.color="#991177";
}
OK I should say something here
first note: look at this part
document.styleSheets[0]
styleSheets[x]
why do we should use pointer [x] here?
because maybe we have 3 or 4 or x style sheet in our document
for example
<link rel="stylesheet" type="text/css" rel=nofollow href="CSS1.css" /> <!--for access to this style sheet we should use document.styleSheets[0]-->
<link rel="stylesheet" type="text/css" rel=nofollow href="CSS2.css" /> <!--for access to this style sheet we should use document.styleSheets[1]-->
<link rel="stylesheet" type="text/css" rel=nofollow href="CSS3.css" /> <!--for access to this style sheet we should use document.styleSheets[2]-->
<link rel="stylesheet" type="text/css" rel=nofollow href="CSS4.css" /> <!--for access to this style sheet we should use document.styleSheets[3]-->
NOTE: maybe we use of some style sheets with out link them to our document such as
<style type="text/css">
a{font-family:monospace;color:#0099dd;}
</style>
so for this session we have this
<head>
<link rel="stylesheet" type="text/css" rel=nofollow href="CSS1.css" /> <!--for access to this style sheet we should use document.styleSheets[0]-->
<link rel="stylesheet" type="text/css" rel=nofollow href="CSS2.css" /> <!--for access to this style sheet we should use document.styleSheets[1]-->
<link rel="stylesheet" type="text/css" rel=nofollow href="CSS3.css" /> <!--for access to this style sheet we should use document.styleSheets[2]-->
<style type="text/css"> <!--for access to this style sheet we should use document.styleSheets[3]-->
a{font-family:monospace;color:#0099dd;}
</style>
<link rel="stylesheet" type="text/css" rel=nofollow href="CSS4.css" /> <!--for access to this style sheet we should use document.styleSheets[4]-->
</head>
so as you see reference and point the step by step
second Note: look at this part
document.styleSheets[0].cssRules[0]
cssRules[x]
you see we have use pointer here too because we CAN have more than 1 rule in each sheet
so with this example you will understand this guy
<style type="text/css">
b{font-family:tahoma;color:black;} <!--for access to this rule we should use document.styleSheets[0].cssRules[0]-->
code{font-family:monospace;color:#333333;} <!--for access to this rule we should use document.styleSheets[0].cssRules[1]-->
</style>
<style type="text/css">
a{font-family:Arial;color:#0099dd;} <!--for access to this rule we should use document.styleSheets[1].cssRules[0]-->
</style>
OK put them all together with a add function for add new <a> tag
<!--
ArAsh.D by NetBeans 6.5
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>cool change</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
a{font-family:monospace;color:#0099dd;}
</style>
<script type="text/javascript" >
function addA(){
var elem = document.createElement('a');
var br=document.createElement("br");
elem.innerHTML="We Well Rock you";
document.getElementById('link').appendChild(elem);
document.getElementById('link').appendChild(br);
}
function changeCSS(){
document.styleSheets[0].cssRules[0].style.color="#991177";
}
</script>
</head>
<body>
<div>
<span>this is a normal text and<br/><a> this is a link</a><br/>
so we want change the 'a's tags color<br/>
so now we ahve a lot of 'a' here:<br/>
<span id="link">
<a>Slipnot</a><br/>
<a>Machine head</a><br/>
<a>linkin park</a><br/>
<a>evanecensce</a><br/>
<a>AC/DC</a><br/>
<a>elvis</a><br/></span><br/>
so now press the "change" button to change the color of 'a's to another
AND press the "add link" button for add new link to the document
</span><br/>
<input type="button" value="add" onclick="addA()" /><br/>
<input type="button" value="change CSS" onclick="changeCSS()" />
</div>
</body>
</html>
So please see both ways and difference
and you have to do it and something like that for understand for ever
if you have any question ask me!
good luck mi amigos
Welcome Arash, As JSON and DHTML start to get pushed more and more to the forefront of web-based applications, the web designer is faced with a new problem: how to dynamically insert a script element into an existing web page. It won't take long to figure out that ajax loads and innerHTML injections won't work. Dynamic Cascading Style Sheets The usefulness of being able to dynamically load a style sheet is fairly limited, but there is one very good reason to keep this tool handy: it lets you load a specific stylesheet for a specific browser. Instead of having one massive style sheet for every browser which visits your page, you can break out the stylesheets into browser specific Firefox, IE, Opera, etc styles which accommodate the eccentricities of each browser and let you serve smaller css files to your visitors to boot. The code for this is just as simple as the javascript. var headID = document.getElementsByTagName("head")[0]; var cssNode = document.createElement('link'); cssNode.type = 'text/css'; cssNode.rel = 'stylesheet'; cssNode.href = 'FireFox.css'; cssNode.media = 'screen'; headID.appendChild(cssNode); We get the <head> tag, then create the link and apply the attributes. When it's all set up we insert the new cssNode into the head section of our webpage where the various styles are instantly applied. A complete reference for adding, creating, altering and deleting stylesheets and their elements can be found in a newer article titled Totally Pwn CSS with Javascript.