How could I access CSS with JS ??
I searched alot among tutorials but I only find how to acces the style attribute of the element.
the elements doesn't contain id attributes, only class attributes
So I want to Access the style tag .
Thank you,
RadianIf I understand you correctly you want to know the class selector declarations.
I think you can only access the declarations through an index not a class name. See <!-- m --><a class="postlink" href="http://www.quirksmode.org/dom/w3c_css.html">http://www.quirksmode.org/dom/w3c_css.html</a><!-- m -->
The values could be read directly from the element with the class value.yes , Thats is what I need thank you but does this seems to be the right code ??
<html>
<head>
<style>
a {color:red}
</style>
</head>
<body>
<a>JS sucks</a>
<script>
alert( document.styleSheets[0].cssRules[0].style.getPropertyValue('color') )
</script>
</body>
</html>
I copied the code as it is from the tutorial you linked
I use IE 6Any way , I found a stupid way to edit CSS , (remove whole Rule & add new one) in addition to working on IE only :s
<html>
<head>
<style>
a {color:red}
</style>
</head>
<body>
<a>Tamer</a>
<script>
document.styleSheets[0].removeRule(0) ;
document.styleSheets[0].addRule('a', 'color:blue')
</script>
</body>
</html>
Any way it saved the site for now
As I know that all my visitors use IE
And waiting for the master oneWhy not change a specific class this way:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>change style</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function change(cName) {
var aElm=document.body.getElementsByTagName('*');
for(var i=0; i<aElm.length; i++) {
if(aElm.className==cName) {aElm.style.color='blue';}
}
}
//-->
</script>
<style type="text/css">
<!--
.xxxx {color:red;}
-->
</style>
</head>
<body>
<div class="xxxx">class xxxx</div>
<div>no class</div>
<div class="xxxx">class xxxx</div>
<div>
<button type="button" onclick="change('xxxx');">change</button>
</div>
</body>
</html>
I searched alot among tutorials but I only find how to acces the style attribute of the element.
the elements doesn't contain id attributes, only class attributes
So I want to Access the style tag .
Thank you,
RadianIf I understand you correctly you want to know the class selector declarations.
I think you can only access the declarations through an index not a class name. See <!-- m --><a class="postlink" href="http://www.quirksmode.org/dom/w3c_css.html">http://www.quirksmode.org/dom/w3c_css.html</a><!-- m -->
The values could be read directly from the element with the class value.yes , Thats is what I need thank you but does this seems to be the right code ??
<html>
<head>
<style>
a {color:red}
</style>
</head>
<body>
<a>JS sucks</a>
<script>
alert( document.styleSheets[0].cssRules[0].style.getPropertyValue('color') )
</script>
</body>
</html>
I copied the code as it is from the tutorial you linked
I use IE 6Any way , I found a stupid way to edit CSS , (remove whole Rule & add new one) in addition to working on IE only :s
<html>
<head>
<style>
a {color:red}
</style>
</head>
<body>
<a>Tamer</a>
<script>
document.styleSheets[0].removeRule(0) ;
document.styleSheets[0].addRule('a', 'color:blue')
</script>
</body>
</html>
Any way it saved the site for now
As I know that all my visitors use IE
And waiting for the master oneWhy not change a specific class this way:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>change style</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function change(cName) {
var aElm=document.body.getElementsByTagName('*');
for(var i=0; i<aElm.length; i++) {
if(aElm.className==cName) {aElm.style.color='blue';}
}
}
//-->
</script>
<style type="text/css">
<!--
.xxxx {color:red;}
-->
</style>
</head>
<body>
<div class="xxxx">class xxxx</div>
<div>no class</div>
<div class="xxxx">class xxxx</div>
<div>
<button type="button" onclick="change('xxxx');">change</button>
</div>
</body>
</html>