I am trying to delete the first css rule.
However, this does not work in Firefox 3.6.28. Is this the same for everyone and why is this the case?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
console.log(document.styleSheets);
document.styleSheets[0].deleteRule(0);
console.log(document.styleSheets); // same as the first console.log
});
</script>
<style>
body{font-size:62.5%;}
#mc{padding:310px 0 10px 162px; color:#fff;}
#content{width:500px;}
#header{padding-top:10px;}
#banner{padding:10px 0}
</style>
</head>
<body>
Test JS
</body>
</html>
Update
Just to clarify, the delete seems to be working however the console.log shows the same number of rules before and after the delete.
Seems to work just fine for me
example at http://jsfiddle.net/gaby/JmWwM/
you need to check the length of the
cssRulesproperty.If you log the actual object in firebug then when you try to dig deeper it will show you the current state of the stylesheet, so it will have a reduced number of rules.. (since by the time you start digging the deletion will have occured)
but if you log the actual number of rules before and after the deletion then it will show the correct results..
so the problem is a mistake in understanding how the
console.logcommand works.