We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Updating css rules within classes.

  • 1 reply
  • 1 has this problem
  • 2 views
  • Last reply by cor-el

more options

I am trying to use javascript to insert css rules within css classes. However I am only finding that my code only succeeds in prepending a new class and rule, while NOT inserting a new rule within a desired predefined css class. eg:

<style type="text/css">

a1.inner {
          position: relative;   
          display:  block;
          width:    100px;
          height:   100px;
          left:     -1px;
          top:      -1px; 
          border:   solid black 1px;
                
	 }

a2.outer {
          display:  block;
          width:    350px;
          height:   100px;  
          border:   solid black 1px;
          overflow: hidden;
         }

a3.inner {
          position: relative; 
          display:  block;
          width:    141.42px;
          height:   141.42px;
          left:     -1px;
          top:      -1px; 
          border:   solid black 1px;  
         }

a4.outer {
          display:  block;
          width:    100px;
          height:   100px; 
          border:   solid black 1px;
          overflow: hidden;
         }
</style>


document.styleSheets[0].insertRule('a1.inner{-moz-transform:rotate(45deg);}',cssRuleEndIndex);


How do I insert/read/update a new selector:value; rule in a specified css class? Is there a way to "create"/set/get css properties and values, within css classes, in a multiple platform way, particurly if css has already been defined in javascript or a css style block like this one?

I am trying to use javascript to insert css rules within css classes. However I am only finding that my code only succeeds in prepending a new class and rule, while NOT inserting a new rule within a desired predefined css class. eg:<br /> <br /> <pre><nowiki><style type="text/css"> a1.inner { position: relative; display: block; width: 100px; height: 100px; left: -1px; top: -1px; border: solid black 1px; } a2.outer { display: block; width: 350px; height: 100px; border: solid black 1px; overflow: hidden; } a3.inner { position: relative; display: block; width: 141.42px; height: 141.42px; left: -1px; top: -1px; border: solid black 1px; } a4.outer { display: block; width: 100px; height: 100px; border: solid black 1px; overflow: hidden; } </style> </nowiki></pre> <br /> <pre><nowiki>document.styleSheets[0].insertRule('a1.inner{-moz-transform:rotate(45deg);}',cssRuleEndIndex); </nowiki></pre> <br /> How do I insert/read/update a new selector:value; rule in a specified css class? Is there a way to "create"/set/get css properties and values, within css classes, in a multiple platform way, particurly if css has already been defined in javascript or a css style block like this one?

Modified by cor-el

All Replies (1)

more options

You probably need to add a new stylesheet with that rule after the last stylesheet.


A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.

See http://forums.mozillazine.org/viewforum.php?f=25