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!

Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Meer info

Deze conversatie is gearchiveerd. Stel een nieuwe vraag als u hulp nodig hebt.

Updating css rules within classes.

  • 1 antwoord
  • 1 heeft dit probleem
  • 2 weergaven
  • Laatste antwoord van 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?

Bewerkt door cor-el op

Alle antwoorden (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