Webmaster Forum Rules | Posting Guide | Contact Us | Testimonials | Contributing Geek Program | Advertise on Geek/Talk
Welcome to the GeekTalk Webmaster Discussion Forums from GeekVillage.com

Click Here To Register. It's Free!

Go Back   geek/talk: Signature-free discourse for serious web publishers > YOUR CREATION: Building & Maintaining A Web Site > Web Development - Programming / Coding
User Name
Password
Register FAQ Calendar Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-23-2005, 08:20 PM   #1
aredamkrik
Registered User
 
Join Date: Aug 2005
Posts: 15
Default getAttribute() question

I want to use this line to save my original background and be able to go back to it.

origBackground = document.getElementById(elm).style.getAttribute("b ackground");

// elm= 'body' (id of the <body> element)

This works if you set the attribute b4 the line using

document.getElementById(elm).style.setAttribute("b ackground","BLACK");

or

document.getElementById(elm).style.background="BLA CK";


I am wondering if there's a different way to get the attributes from my CSS?

I have it linked and the background comes up right, but it cannot be retrieved in javascript by getAttribute()

the function is called like this

<body id="body" onLoad="saveStyle('body')">
<a href="#" onClick="restoreStyle('body');">Original</a>
<a href="#" onClick="changeStyle('body','style1');">Style 1</a>
</body>
aredamkrik is offline   Reply With Quote
Old 08-24-2005, 03:35 AM   #2
georgec
Registered User
 
Join Date: Apr 2001
Posts: 519
Default

I think basically you're asking how to retrieve the value of a CSS attribute that's defined via an external style sheet? You can actually use JavaScript to go into an external style sheet and access each CSS attribute, but it gets quite messy. An easier way is just to retrieve the applied CSS value of an attribute. It's easier for me to just point to you a tutorial i wrote a while back on this: http://www.javascriptkit.com/dhtmltu...lcascade.shtml
georgec is offline   Reply With Quote
Old 08-24-2005, 06:47 PM   #3
aredamkrik
Registered User
 
Join Date: Aug 2005
Posts: 15
Default

Thanks that helped a lot!

So now I have:

if (el.currentStyle){ //IE
bodyBackgroundColor = myBody.currentStyle.backgroundColor;
bodyBackgroundImage = myBody.currentStyle.backgroundImage;**

else if (window.getComputedStyle){ //Netscape,Mozilla
var myBodyStyle = window.getComputedStyle(myBody, "");
bodyBackgroundColor = myBodystyle.getPropertyValue("background-color");
bodyBackgroundImage = myBodystyle.getPropertyValue("background-image");

This method works for storing the original CSS info in IE, Mozilla, Netscape (at least newer versions). Does anyone know if there is something like this that works for Opera?
aredamkrik is offline   Reply With Quote
Old 08-24-2005, 08:04 PM   #4
aredamkrik
Registered User
 
Join Date: Aug 2005
Posts: 15
Default

myBody in last post defined better>

myBody = document.getElementById("body");

<body id="body">


A second problem with this method is that it can only get attributes that are already applied to the specific tag with id (<body id="body">). It goes to the "body" id, which identifies the <body> tag and then retrieves that attributes applied to it (background-color, color, font-size, etc.). This way kind of works for what I'm doing, but it would be ideal to be able to retrieve attributes by directly referencing a CSS. Is it possible to reference a CSS file directly to retrieve attribute info? -as opposed to referencing the attributes applied to a division (<body>) of the html document.

Sorry, but I can't think of a less confusing way to ask that .
aredamkrik is offline   Reply With Quote
Old 08-25-2005, 05:12 AM   #5
georgec
Registered User
 
Join Date: Apr 2001
Posts: 519
Default

Can you post the entire external CSS in question, and the rule that you want to access within it?
georgec is offline   Reply With Quote
Old 08-25-2005, 03:20 PM   #6
aredamkrik
Registered User
 
Join Date: Aug 2005
Posts: 15
Default entire code

Save as style.html, styleSimple.js, and styleSimple.css

//////////////////////////////// HTML ///////////////////////////////////////////

<html>
<head>
<title>Style</title>
<link rel="stylesheet" type="text/css" href="styleSimple.css" />
<script type="text/javascript" src="styleSimple.js"></script>
</head>

<body id="body" onLoad="saveStyle('body')">
<a id="a" href="#" onClick="restoreStyle('body');">Original</a>
<a id="a" href="#" onClick="changeStyle('body','style1');">Style 1</a>
<a id="a" href="#" onClick="changeStyle('body','style2');">Style 2</a>

<div class="container" id="div" onLoad="saveStyle('div')">
<a id="a" href="#" onClick="restoreStyle('div');">Original</a>
<a id="a" href="#" onClick="changeStyle('div','style1');">Style 1</a>
<a id="a" href="#" onClick="changeStyle('div','style2');">Style 2</a>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</body>
</html>

//////////////////////////////// HTML /////////////////////////////////////////

////////////////////////////// Javascript /////////////////////////////////////

var origBackgroundColor = "";
var origColor = "";

function changeBackgroundColor(elm, newColor){document.getElementById(elm).style.backg roundColor = newColor;**
function changeColor(elm, newColor){document.getElementById(elm).style.color = newColor;**

function saveStyle(elm){
var myElm = document.getElementById(elm);

if (el.currentStyle){
origBackgroundColor = myElm.currentStyle.backgroundColor;
origColor = myElm.currentStyle.color;
**

else if (window.getComputedStyle){
var myElmStyle = window.getComputedStyle(myElm, "");
origBackgroundColor = myElmstyle.getPropertyValue("background-color");
origColor = myElmstyle.getPropertyValue("color");
**
**

function changeStyle(elm, style) {
if(style=="style1"){
changeBackgroundColor(elm, "WHITE");
changeColor(elm, "BLACK");
**

if(style=="style2"){
changeBackgroundColor(elm, "ORANGE");
changeColor(elm, "BLUE");
**
**

function restoreStyle(elm) {
changeBackgroundColor(elm, origBackgroundColor);
changeColor(elm, origColor);
**

////////////////////////////////// Javascript //////////////////////////////////

/////////////////////////////////////// CSS /////////////////////////////////////

body{
background-color: BLACK;
color:WHITE;
**

div.container{
position:absolute;
top:100;
left:100;
width:300;
height:300;
overflow:hidden;
background-color:RED;
color:GREEN;
**

/////////////////////////////////////// CSS /////////////////////////////////////
aredamkrik is offline   Reply With Quote
Old 08-25-2005, 03:29 PM   #7
aredamkrik
Registered User
 
Join Date: Aug 2005
Posts: 15
Default

This is fun and all but it only affects the screen you are in. What I was asking, I guess, is if there is a way to write to/read from files with javascript. Instead of using the variables origBackground and origColor, I'd like to save those to a file and be able to retrieve them to restore the style. This way the style change could be applied to other pages as well.

On a side note, what's the code to reference a user's IP address (To be able to save individual styles). A user name/password would work but I don't want people to need to make one to enter.
aredamkrik is offline   Reply With Quote
Old 08-25-2005, 04:27 PM   #8
georgec
Registered User
 
Join Date: Apr 2001
Posts: 519
Default

Hi:
Assuming the CSS file:
Code:
body{
background-color: BLACK;
color:WHITE;
**

div.container{
position:absolute;
top:100;
left:100;
width:300;
height:300;
overflow:hidden;
background-color:RED;
color:GREEN; 
**
To read the background-color attribute using JavaScript, you would do:
Code:
<script type="text/javascript">
var crossrule=document.styleSheets[0].cssRules? document.styleSheets[0].cssRules : document.styleSheets[0].rules
bgattribute=crossrule[0].style.backgroundColor //returns "black"
</script>

The above script assumes the CSS file is the very first stylesheet on your page (hence document.styleSheets[0]).

To answer your other question regarding writing to files, unfortunately JavaScript can't do that. You'll need something like PHP in conjunction to actually rewrite the CSS file. However, I doubt that's what you really want, as it means every time some user customizes the CSS file, it affects everyone else viewing your site. A better way may be to use cookies, so user changes are stored inside his/her computer (ie: to the backgroundColor attribute), then retrieved by your script to tailor the background color to his choice.
georgec is offline   Reply With Quote
Old 08-26-2005, 01:59 AM   #9
aredamkrik
Registered User
 
Join Date: Aug 2005
Posts: 15
Default

Wow, never would've figured that one out. Thanks a lot for helping me out!

As far as cookies go, I am totally lost. But that's something to hit a little later. Is that something JavaScript can do, or does that involve switching to PHP?
aredamkrik is offline   Reply With Quote
Old 08-27-2005, 01:13 AM   #10
aredamkrik
Registered User
 
Join Date: Aug 2005
Posts: 15
Default

here's a simplified version of my new code. It applies css by the number they are listed.

/////////////////////////// style.html ///////////////////////////////////////

<html>
<head>
<title>Style</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style1.css" />
<script type="text/javascript" src="style.js"></script>
</head>

<body id="body">
<a id="a" href="#" onClick="applyStyle('0');">Original </a>
<a id="a" href="#" onClick="applyStyle('1');">Style 1 </a><p />
text text text text text text text text text text text text
</body>
</html>

///////////////////////////// style.html /////////////////////////////////////////


////////////////////////// style.js /////////////////////////////////////////

function changeBackgroundColor(elm, newColor){ document.getElementById(elm).style.backgroundColor = newColor;**
function changeColor(elm, newColor){ document.getElementById(elm).style.color = newColor;**
function changeFontSize(elm, newFontSize){ document.getElementById(elm).style.fontSize = newFontSize;**

function applyStyle(num) {
var styleSheet = document.styleSheets[num].cssRules? document.styleSheets[num].cssRules : document.styleSheets[num].rules;

var bodyBgColor = styleSheet[0].style.backgroundColor;
var bodyColor = styleSheet[0].style.color;
var bodyFontSize = styleSheet[0].style.fontSize;

changeBackgroundColor("body", bodyBgColor);
changeColor("body", bodyColor);
changeFontSize("body", bodyFontSize);
**

//////////////////////////// style.js ///////////////////////////////////////////

///////////////////////////// style1.css ///////////////////////////////////

#body{
background-color: BLACK;
color:WHITE;
font-size:1em;
**

///////////////////////////// style1.css ////////////////////////////////////////

///////////////////////////// style2.css ///////////////////////////////////

#body{
background-color: BLACK;
color:WHITE;
font-size:1em;
**

/////////////////////////////style2.css ////////////////////////////////////////

works much better this way.

Was wondering how you would reference the pseudoclasses of "a" (a:link, a:visited, a:hover, a:hover img, and a:active). I can get to a: with getElementById("a") but I don't know how to get to the classes under it.

thought maybe -
document.getElementById("a").style.link.color or
document.getElementById("a:link").style.color

but they don't work

Can someone help me out with this?
aredamkrik is offline   Reply With Quote
Old 08-27-2005, 01:15 AM   #11
aredamkrik
Registered User
 
Join Date: Aug 2005
Posts: 15
Default fix

style2.css should not have # before body.
aredamkrik is offline   Reply With Quote
Old 08-27-2005, 01:16 AM   #12
aredamkrik
Registered User
 
Join Date: Aug 2005
Posts: 15
Default

And they should obviously be different styles... lol. sorry, just copy/pasted and didn't change
aredamkrik is offline   Reply With Quote
Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
ADMIN: VIP geek/chat transcripts for 5/20/00. READ ME! Steve_S Archives of old posts from Let's Barter/Trade, Buy, & Sell 0 05-21-2000 12:12 PM
ADMIN: VIP geek/chat transcripts for 5/20/00. READ ME! Steve_S Marketing Your Website Online 0 05-21-2000 12:11 PM
ADMIN: VIP geek/chat transcripts for 5/20/00. READ ME! Steve_S Making Money with CPC and/or CPM Programs 0 05-21-2000 12:09 PM
ADMIN: VIP geek/chat transcripts for 5/20/00. READ ME! Steve_S Web Design and Webmaster Issues 0 05-21-2000 12:08 PM
Perplexing Tax Question KidKilowatt Making Money with CPC and/or CPM Programs 11 03-30-2000 08:11 PM

Please support our advertisers. They ensure our survival.

All times are GMT -5. The time now is 01:09 PM.


GeekVillage.com is copyright © 1998-2014 iOnline Web Design. All rights reserved.
Powered by vBulletin® Version 3.7.4
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.