#1
  1. No Profile Picture
    Senior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    151
    Rep Power
    0

    how to change properties of a css class


    i know how to write a script to change the class that an element belongs to. for example if you have a div tag that has a class of "class1" and want to change it to "class2" i know how to do that.


    two questions

    1. is there a way to change the properties of a css class (color, background etc) through javascript? i am not talking about changing an element's style or the class it belongs to, but changing the entire css class itself.

    2. if (1) is not possible, i think i have a way. but i need to know, is there some sort of array, that i can reference by a number, that keeps track of all elements or all div elements? document.all[] seems like it would but i never see an example of someone using document.all[n] for n=0,1,2,3...

    thanks
  2. #2
  3. No Profile Picture
    Senior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    151
    Rep Power
    0
    Thank you, first of all, for your help!

    Wow, I'm gonna have try that out tommorrow. Right now I am pooped with trying to get my scripts to work on ns7.

    Speaking of which, this is an unrelated topic, but if you know this it would help me out so much. What is the netscape equivalent of IE's "event.offsetX" and "event.offsetY"? I am trying to capture the coordinates of the mouse on the "onmousemove" event in relation to an element.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    Here's another way:

    Supposing you have one (and only one) stylesheet linked like this:
    Code:
    <link rel="stylesheet" type="text/css" href="mystylesheet.css">
    And this stylesheet contains:
    Code:
    .myclass {
    	font-family: arial;
    	background-color: red;
    }
    Add this JavaScript function to the <head> section of your document:
    Code:
    function changecss(myclass,element,value) {
    	var CSSRules
    	if (document.all) {
    		CSSRules = 'rules'
    	}
    	else if (document.getElementById) {
    		CSSRules = 'cssRules'
    	}
    	for (var i = 0; i < document.styleSheets[0][CSSRules].length; i++) {
    		if (document.styleSheets[0][CSSRules][i].selectorText == myclass) {
    			document.styleSheets[0][CSSRules][i].style[element] = value
    		}
    	}	
    }
    And here's some HTML to test it.
    It's supposed to change the background color of 'myclass' from red (as stated in the stylesheet) to yellow.
    It works on Mozilla and IE5.5. It does NOT work in Opera7 (does not support rules?).
    Please notice that you need to use the JavaScript syntax of CSS elements (backgroundColor instead of background-color).

    Code:
    <p class="myclass">paragraph with style myclass</p>
    <div onclick="changecss('.myclass','backgroundColor','yellow')">show css</div>
    If you have more than one stylesheet, you need to change the code. If you use inline styling (a style tag inside your document), you probably need to do it differently.

    Hope this helps,
    Jeroen
    (I like these kind of questions)
  6. #4
  7. No Profile Picture
    Senior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    151
    Rep Power
    0

    AWESOME


    THIS IS GREAT!
    man, javascript is such a blast to learn. i just wish there was some way i could get a reference for all the different functions etc. i never heard of rules until now.

    could any of you guys recommend a good reference for javascript?
    i dont really need one of those beginner manuals, i most often find i need help because i am limited by my knowledge of properties, functions etc.

    i
  8. #5
  9. No Profile Picture
    Senior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    151
    Rep Power
    0

    Hi Jerom


    Jerom,

    Thanks for taking the time to help me out with that one. You really helped me out a lot!

    Since you like these challenges how about another one? hehe.
    I finally got this mouse capture script to work in both ns and ie, but there is one hitch--how do i turn the mouse capture off?

    basically i have some code that im sure most people have seen:

    Code:
    layobj.onmousemove = moved;
    where "moved" is a function that handles the onmousemove event.
    so is there a way i can turn off "moved" or to turn off the onmousemove event?

    thanks in advnance
    chris
  10. #6
  11. No Profile Picture
    Senior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    151
    Rep Power
    0
    well i accomplished that with some global variables and if else's, but id still like to know if there is a better way to do it. i try to avoid globals when i can.

    chris
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    Seems to work in Mozilla, Opera7, and IE5.5:
    Code:
    function moveOff(theid) {
    	var element = document.getElementById(theid)
    	if (navigator.userAgent.toLowerCase().indexOf("opera") != -1)
    		element.onmousemove = undefined
    	else
    		element.onmousemove = ''
    }
    Hope this helps,
    Jeroen

IMN logo majestic logo threadwatch logo seochat tools logo