Forum Moderators: open
I mean: I have an external css file, linked in the page with something like this:
<link rel="stylesheet" href="/#*$!.css" type="text/css">
Say that in the #*$!.css file I have somethng like this:
.myTAG
{
FONT-SIZE: 11px;
BORDER-LEFT: #bfdfff 0px solid;
BORDER-BOTTOM: #ffffff 0px solid;
LIST-STYLE-TYPE: square;
TEXT-ALIGN: center;
font-weight : bold;
background-color: #FFFFFF;
}
Can I get into a JavaScript variable the value of, say, background-color or BORDER-BOTTOM or any other "css tag"? How can it be done?
Thanks in advance. Frank
Yes, by accessing normal DOM objects through getElementsByTagName or getElementById you can check the style. For example, consider the following:
#myId {
color: red;
}
document.getElementById('myId').style.color would return 'red'.
However, if you're asking if there's something like a getElementsByClassName, the answer is no. However, various WebmasterWorld members have worked on such functions. You can find these past threads through the nifty site search [WebmasterWorld.com].
check out this...
<!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">
<head>
<title>display css information</title><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/body {
background:#bbc;
}#cell {
width: 330px;
height:150px;
background-color: #eef;
border:solid 1px #000;
font-family:verdana;
font-size:16px;
color: #f00;
line-height:150px;
text-align:center;
margin:auto;
}/*//]]>*/
</style><script type="text/javascript">
//<![CDATA[function displayInfo() {
if((navigator.appName=="Netscape")¦¦(navigator.appName=="Opera")) {
compStyle=getComputedStyle(document.getElementById('cell'),'');
a=compStyle.getPropertyValue('width');
b=compStyle.getPropertyValue('height');
c=compStyle.getPropertyValue('background-color');
d=compStyle.getPropertyValue('border-top-style');
e=compStyle.getPropertyValue('border-top-width');
f=compStyle.getPropertyValue('border-top-color');
g=compStyle.getPropertyValue('font-family');
h=compStyle.getPropertyValue('font-size');
i=compStyle.getPropertyValue('color');alert('width: '+a+'\n'+'height : '
+b+'\n'+'background-color : '+c+'\n'+'border-style : '+d+'\n'
+'border-width : '+e+'\n'+'border-color : '+f+'\n'+'font-family : '+g+'\n'+'font-size : '+h+'\n'+'color : '+i);}
else {ai=document.getElementById('cell').currentStyle.width;
bi=document.getElementById('cell').currentStyle.height;
ci=document.getElementById('cell').currentStyle.backgroundColor;
di=document.getElementById('cell').currentStyle.borderStyle;
ei=document.getElementById('cell').currentStyle.borderWidth;
fi=document.getElementById('cell').currentStyle.borderColor;
gi=document.getElementById('cell').currentStyle.fontFamily;
hi=document.getElementById('cell').currentStyle.fontSize;
ii=document.getElementById('cell').currentStyle.color;alert('width: '+ai+'\n'+'height : '
+bi+'\n'+'background-color : '+ci+'\n'+'border-style : '+di+'\n'
+'border-width : '+ei+'\n'+'border-color : '+fi+'\n'+'font-family : '+gi+'\n'+'font-size : '+hi+'\n'+'color : '+ii);}
}function useVar(el) {
if((navigator.appName=="Netscape")¦¦(navigator.appName=="Opera")) {
compStyle=getComputedStyle(document.getElementById('cell'),'');
el.style.color=compStyle.getPropertyValue('color');
}
else {el.style.color=document.getElementById('cell').currentStyle.color;
}
}window.onload=displayInfo;
//]]>
</script></head>
<body><div id="cell">This is now cross-browser compatable</div>
<div onclick="useVar(this)">click here</div</body>
</html>
birdbrain
Bye, Frank
