Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Grab properties from source with style.cssText 3

Status
Not open for further replies.
Sleidia

Sleidia

Technical User
Joined
May 4, 2001
Messages
1,284
Location
FR
Hello :)

One piece of information I was unable to find :

In the stylesheet, I have this :

#object1 a {
background-color: #ffffff;
}

#object2 a {
background-color: #000000;
}

Only #object1 is located in the html page.

Now, from a javascript, I want to grab all the properties of object2 and assign them to object1 ... but this is where I'm stuck :

document.getElementById( 'object1').style.cssText = ???;

A workaround would be to have a dummy object2 hidden in the html page and do this :

document.getElementById( 'object1').style.cssText = document.getElementById( 'object2').style.cssText;

... but I don't like it.

Any idea?
 
Sort by date Sort by votes
If you made object2 a named class instead of an ID class, you could just assign "object2" to the className property of object1.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Sleidia, I'm not sure I understand what you're saying. You said you want to grab all the styles from object2 and apply them to object1, however you need to make a dummy element for object2? Wouldn't object2 already exist? Why would you need to create the dummy element? And if object2 doesn't exist, then where are you pulling the styles from to apply to object1?

You'll probably need to supply a bit more information. (btw, tracy's suggestion is probably where I was gonna go with the answer, assign them classes and then change the className attribute)

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
 
Upvote 0 Downvote

Thanks, tsdragon :)

I just tested this :

#object1 a {
background-color: #ffffff;
}

.object2 {
background-color: #000000;
}

document.getElementById( 'object1').className = 'object2';

Doesn't work :(

 
Upvote 0 Downvote
works perfectly for me:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html>
<head>
<title>Untitled</title>
<style type="text/css">

body {
background-color: red;
}
#object1 a {
background-color: #ffffff;
}
.object2 {
background-color: #000000;
}
</style>
</head>
<body>

<div id="object1">
<a href="#">My Anchor</a>
</div>

<input type="button" onclick="document.getElementById('object1').className = 'object2';" />

</body>
</html>

make sure you don't have other styles overwriting what you're trying to do.



*cLFlaVA
----------------------------
[tt]( <P> <B>)13 * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
here's a working example using the className method:
Code: 
<style type="text/css">

.class1 {
   color:#ff0000;
}

.class2 {
   color:#0000ff;
}

</style>

<p id="blah" [!]class="class1"[/!]>this is a test</p>
<input type="button" value="click me" onclick="document.getElementById('blah').className = [!]'class2'[/!]" />

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
 
Upvote 0 Downvote
Sorry guys ... still doesn't work ... maybe because I'm also working with ids in <a href> ???

Here are the pieces of code that work together :

Code: 
CSS : 

*/ default look of unselected tabs

#tabs a {
-moz-box-sizing: border-box;
margin: 0px 5px 0px 0px;
padding: 6px 10px 3px 10px;
background-color: #ffffff;
color: #9a9a9a;
border-top:1px solid #9a9a9a;
border-left: 1px solid #9a9a9a;
border-right:1px solid #9a9a9a;
font-weight: bold;
text-decoration: none;
}

*/ look of selected tab

.tabson {

color: #365093;
border-top:1px solid #365093;
border-left: 1px solid #365093;
border-right:1px solid #365093;

}

JAVASCRIPT :

// tabs management
function id_toggle_tabs( tabname, zonename, targetid, idnum ) {


    for( var j=1; j <= idnum; j++ ) {
    
        if(document.getElementById( zonename+j )) {

        // hide zone linked to specified tab
        document.getElementById( zonename+j ).style.display = 'none';
                
        }
        
    }

    if(document.getElementById( zonename+targetid )) {
    
    // change look of clicked tab
    document.getElementById( tabname+targetid ).className = 'tabson';
    
    // unhide zone linked to specified tab
    document.getElementById( zonename+targetid ).style.display = '';
        
    }

}

HTML :

<div id="tabs">
<a href="javascript: defocus(this); id_toggle_tabs('tab', 'page', 1, 2);" id="tab1"> TAB NUMBER ONE </a>
<a href="javascript: defocus(this); id_toggle_tabs('tab', 'page', 2, 2);" id="tab2"> TAB NUMBER TWO </a>
</div>


But, it works when I replace

Code: 
    // change look of clicked tab
    document.getElementById( tabname+targetid ).className = 'tabson';

by

Code: 
    // change look of clicked tab
    document.getElementById( tabname+targetid ).style.cssText = 'color: #365093; border-top:1px solid #365093; border-left: 1px solid #365093; border-right:1px solid #365093;';
 
Upvote 0 Downvote
Sleidia,

I was able to get this sort-of working after playing around with what you provided. here's what I changed:

Code: 
.tabsoff {
    -moz-box-sizing: border-box;
    margin: 0px 5px 0px 0px;
    padding: 6px 10px 3px 10px;
    background-color: #ffffff;
    color: #9a9a9a;
    border-top:1px solid #9a9a9a;
    border-left: 1px solid #9a9a9a;
    border-right:1px solid #9a9a9a;
    font-weight: bold;
    text-decoration: none;
}

.tabson {
    color: #365093;
    border-top:1px solid #365093;
    border-left: 1px solid #365093;
    border-right:1px solid #365093;
}

Code: 
<a href="#" onclick="id_toggle_tabs('tab', 'page', 1, 2); return false;" id="tab1" class="tabsoff"> TAB NUMBER ONE </a>
<a href="#" onclick="id_toggle_tabs('tab', 'page', 2, 2); return false;" id="tab2" class="tabsoff"> TAB NUMBER TWO </a>

notice i also changed your href and added onclick calls. you may be able to leave your own in there, but that's just what i did (because it's my preferred method). also, notice the class i added to the anchor tags themselves.



*cLFlaVA
----------------------------
[tt]( <P> <B>)13 * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Your problem could be because of specificity, but I can't (am unwilling) test it out right now -- do you have a link to this, so that we can make sure? BTW, your comments in the CSS script are erroneous and could cause trouble.
 
Upvote 0 Downvote
Many many thanks to you, cLFlaVA :)

It finally works (on IE, Firefox and Opera as well).

Just for the record, here is the final code :

Code: 
.taboff {

    -moz-box-sizing: border-box;
    margin: 0px 5px 0px 0px;
    padding: 6px 10px 3px 10px;
    background-color: #ffffff;
    color: #9a9a9a;
    border-top:1px solid #9a9a9a;
    border-left: 1px solid #9a9a9a;
    border-right:1px solid #9a9a9a;
    font-weight: bold;
    text-decoration: none;

}

.taboff:link {color: #9a9a9a;}
.taboff:visited {color: #9a9a9a;}
.taboff:active {color: #9a9a9a;}

.tabon {

    -moz-box-sizing: border-box;
    margin: 0px 5px 0px 0px;
    padding: 6px 10px 3px 10px;
    background-color: #ffffff;
    color: #365093;
    border-top:1px solid #365093;
    border-left: 1px solid #365093;
    border-right:1px solid #365093;
    font-weight: bold;
    text-decoration: none;

}

.tabon:link {color: #365093;}
.tabon:visited {color: #365093;}
.tabon:active {color: #365093;}

-----------------------------------------------

// tabs management
function id_toggle_tabs( tabname, zonename, targetid, idnum ) {


    for( var j=1; j <= idnum; j++ ) {
    
        if(document.getElementById( zonename+j )) {

        // hide zone linked to specified tab
        document.getElementById( zonename+j ).style.display = 'none';
        
            // fix look of unclicked tabs
            if(j != targetid) document.getElementById( tabname+j ).className = tabname+'off';
        
        }
        
    }

    if(document.getElementById( zonename+targetid )) {
    
    // change look of clicked tab
    document.getElementById( tabname+targetid ).className = tabname+'on';
    
    // unhide zone linked to specified tab
    document.getElementById( zonename+targetid ).style.display = '';
        
    }

}

-----------------------------------------------

<a href="javascript: defocus(this); id_toggle_tabs('tab', 'page', 1, 2);" id="tab1" class="taboff">" . hd_page_textfill(1) . "</a>
<a href="javascript: defocus(this); id_toggle_tabs('tab', 'page', 2, 2);" id="tab2" class="taboff">" . hd_page_textfill(2) . "</a>

BTW : I've given more stars to you (in other threads) ;)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
lmcate
  • Locked
  • Question Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
530
lmcate
lmcate
jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
waubain
  • Locked
  • Question Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image.
Replies
5
Views
657
jjgupta915
jjgupta915
stephane.bouchard2
  • Locked
  • Question Question
How can you find the html version from source code.
Replies
6
Views
806
stephane.bouchard2
stephane.bouchard2

Part and Inventory Search

Sponsor

Back
Top