How can I copy the CSS styles of Element A to Element B using Javascript?

I want to copy the entire CSS that is applied to element A to a newly created element B - I thought it would be fairly simple using .styles or .cssText but apparently not. :slight_smile:

I can’t just give B the same className as A, as it might not be the same type of element (e.g. I have an image with “padding: 5px; margin: 5px” - I create a new DIV; how do I ‘copy’ the CSS over to the new DIV?)

:confused:

Elements can have multiple classes assigned to them. So build up a bunch of basic classes that have the CSS instructions you desire. Then use javascript to read the class attribute and apply those classes to your tag.

I don’t really want to do it that way, I want to copy the CSS that is actually applied to the element. Anyway, that won’t work if for example I have a CSS rule like:

img.red {
  border: 2px solid red;
}

If I create a DIV and assign the className “red” to it, it won’t pick up the styling (yes, I know I can just change the way I write the CSS, but assume that I can’t).

Hello

free your css use class don’t lock it up like img.red or #red, class rules far better then any ID this runs from scripts or databases

.red{border: 2px solod red;}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	body{
	text-align: center;
	margin:0px;
	padding:0px;
	background-color:#b2b2b2;
	}
	
	div,p,span{
	font-family:Arial,Verdana, Geneva , Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	margin:0px;
	padding:0px;
	text-align:left;
	}
	
	.mcon{
	top:0px;
	left:0px;
	width:754px;
	}
	
	.acon{
	width:754px;
	background:#bababa;
	}
	
	.con{
	width:754px;
	background: #c9c9c9;
	}
	
	.nav{
	width:107px;
	background: #8dabef;
	}
	
	.txt{padding:2px;color:#797979;background:#e0e0e0;}
	.tr{text-align:right;}
	.tc{text-align:center;}
	
	.po{padding:0px;}
	.pb{padding:2px;}
	.pc{padding:10px;}
	
	.ma{margin:0 auto;}
	
	.mt{margin-top:10px;} /* */
	.ml{margin-left:10px;}
	.mr{margin-right:10px;}
	.mb{margin-bottom:10px;}
	
	.mlin{margin-left:10px;}
	.mrin{margin-right:10px;}
	
	.mtp2{margin-top:12px;}
	
	.bl,.b,.bb{
	border-color:#f8f8f8;
	border-style: solid;
	border-width: 1px 0 1px 1px;
	}
	
	.b{border-width: 1px 1px 0 1px;}
	.bb{border-width: 1px 1px 1px 1px;}
	
	a{
	padding-top:2px;
	padding-bottom:2px;
	text-decoration: none;
	text-align: center;
	}
	
	a:visited{
	background:#8dabef;
	color: #787878;
	}
	
	a:hover{
	background:#ffcc00;
	color: #787878;
	}
	
	.fl{float:left;}
	.fr{float:right;}
	.clf{clear:both;}
	
	.w{width:103px;}
	.wx{width:153px;}
	.wty{width:418px;}
	.wtz{width:274px;}
	
	.wc{width:754px;}
	.wca{width:754px;}
	
	.wnc{width:104px;}
	
	</style>
	<!--[if IE]>
 	<style type="text/css">
	* html .mr{display:inline;}
	* html .ml{display:inline;;}
	</style>
	<![endif]-->
</head>
<body>
<div class="mcon ma">

<div class="acon mt mb">

<div class="con">

<div class="pc tc"><br /><br />
header<br /><br /><br />
</div>
<div class="con"><span>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bb wnc">Contact Us</a></span>
</div>
<div class="clf"></div>


<div class="con">

<div class="txt fr wx mlin mb mt">
ay Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br />
</div>

<div class="txt fl wx mt">
az Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br />Text<br /> Test<br />
Text<br /> Test<br />Text<br /> Test<br />
</div>

<div class="txt bb po fl mlin mt wty mb">

<div class="txt fl w bb mt ml">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="txt fr w bb mt mr">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="clf"></div>


<div class="txt fl w bb mt ml">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="txt fl wtz bb mt mlin">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="clf"></div>


<div class="txt fr w bb mt mr mb">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="txt fl w bb mt ml mb">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="clf"></div>

</div>

<br class="clf" />
<div class="con wc">
<div class="txt pc tc">
<br />
footer<br /><br />
</div>

</div>

</div>
<div class="clf"></div>

</div>
</div>
</div>
</body>
</html>

Here are some good tutorials on getting values from an external or embedded stylesheet rather than style attributes:
http://developer.apple.com/internet/webcontent/styles.html
http://www.quirksmode.org/dom/getstyles.html

Your example would be far easier if you removed 3 characters though :wink:

Thanks, I know how to write effective CSS, but I’m writing a tutorial and I can’t legislate for other people’s bad habits.

Thanks for the links, Vinnie. :slight_smile:

CSS property values are stored in the getComputedStyle() object (along with the object’s methods and properties with no values). In theory you could extract the applied styles from that object, but it wouldn’t be a walk in the park. To illustrate:


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
  <title>Untitled</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
  p{background-color:#dde;font:.9em Verdana,sans-serif;}
  </style>
  <script type="text/javascript">
  window.onload=function(){
    var p_1=document.getElementById('pOne');
    var p_1_sty=document.defaultView.getComputedStyle(p_1,null);
    var out_str="";
    for(var val in p_1_sty){
  	out_str+=val+" = "+p_1_sty[val]+"<br />";
    }
    p_1.innerHTML=out_str;
  }
  </script>
  </head>
  <body>
  <p id="pOne"></p>
  </body>
  </html>
  

Note: This is guaranteed NOT to work in all browsers.

AFAIK, Opera hasn’t added support for getComputedStyle() yet.

FYI, Konqueror (and probably Safari) don’t see the CSS properties of the defaultView object returned by getComputedStyle() when queried through for/in. FF and Opera store them with JavaScript-style names, like ‘backgroundColor’. While K will access properties using JS notation, it replies in CSS property-name format (i.e. A query for backgroundColor will return background-color: etc.). I’m sure glad we have standards (Though, personally, I like to keep mine low. It really helps with the dating scene. )

I don’t have time to try it, but I think Opera will return getComputedStyle as long as you make sure to specify document.defaultView. As getComputedStyle is a property of the defaultView some browsers (K & S, for instance) demand its inclusion in the addressing string. The Mozilla family of browsers are more forgiving, allowing getComputedStyle to be misrepresented as a direct method of the document object.

I can now confirm that Opera 8 on Linux supports getComputedStyle and getPropertyValue. I’m pretty sure it worked fine on Opera 7.54 on Windows XP, back when I used that archaic, legacy operating system. In fact, Opera and Moz/FF are the two browser families that will work with the preceding script.