搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

Updating css rules within classes.

  • 1 回覆
  • 1 有這個問題
  • 14 次檢視
  • 最近回覆由 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?

由 cor-el 於 修改

所有回覆 (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