14

コンテンツ生成後にスタイルタグを変更したい。style タグにスタイルを追加するにはどうすればよいですか? 私は使用してみました：

document.getElementById('style').appendChild(styleContents);

しかし、それはうまくいきませんでした

4

8 に答える 8

24

スタイルタグに css を追加しようとしている可能性があります。これは、次を使用して実現できます。

document.getElementsByTagName('style')[0].innerHTML=""; //some css goes here

以下も使用できます。

document.styleSheets[0].cssText = ""; //some css goes here
于 2012-11-13T08:30:52.240 に答える
20

これは古い質問であることは知っていますが、要素にスタイリングを直接適用せずに、これらも動的に更新する方法を見つけようとしています。

スタイル タグに ID を指定して選択すると、シート プロパティを使用してその CSS にアクセスできます。

ここから、必要なものを更新できます。タグ内の CSS 全体を置き換えるか、個々のクラスを更新します。

document.getElementById('somestyletagid').sheet.cssRules[0].selectorText

これがクラス セレクターです。

document.getElementById('somestyletagid').sheet.cssRules[0].style

これらはすべて、そのクラスの個々の css プロパティです。

これを行うことで、背景色を更新できます。

document.getElementById('somestyletagid').sheet.cssRules[0].style.backgroundColor = 'red'

これは、html 内の任意のスタイル タグにアクセスする方法です。残念ながら、私が見つけることができる各 CSSStyleRule に厳密に一意の ID はありません。最も近いのは selectorText ですが、明らかにそれを繰り返すことができます。いずれにせよ、少なくとも私のニーズでは、これはまさに私が必要としているものです。

document.styleSheets を使用して、通常と同じ方法でそれらにアクセスすることにより、含まれている CSS ファイルを更新することもできます。

document.styleSheets[0].href

インクルードされた css ファイルの href。

document.styleSheets[0].cssRules

シート内のすべてのクラス。

これが誰かを助けることを願っています!

于 2015-09-18T18:33:51.070 に答える
4

要素には子要素がありません。styleその内容は定義上、(HTML に関する限り) テキストのみであるためです。ただし、これは、innerHTMLプロパティを使用してコンテンツに追加できることを意味します。要素に が<style id=foo>ある場合は、次のように記述します。

document.getElementById('foo').innerHTML += styleContents;
于 2012-11-13T08:48:38.687 に答える
4

http://jsfiddle.net/fttS5/1/で簡単な例をまとめました。

HTML の他の要素と同じように、スタイル タグに id を付けることができます。

<style id="style"></style>

これで、appendChild で試したコードを取得して、簡単な変更を 1 つ追加できます。

document.getElementById('style').appendChild(document.createTextNode(styleContents));

これでうまくいくはずです。幸運を。

私の以下の回答としてリストされている innerHTML メソッドを使用することもできます。

于 2012-11-13T09:06:48.317 に答える
2

これを試して

var currentElement = document.getElementById('style');
var currentStyle = currentElement.getAttribute('style');
var stylePieces = [];
if(currentStyle) {
    stylePieces = currentStyle.split(';');
}
stylePieces.push('new-style: true;');
currentElement.setAttribute('style', stylePieces.join(';'));
于 2012-11-13T08:29:40.073 に答える
1

jQuery ライブラリを使用して、新しい CSS を DOM 要素に直接追加してみませんか?

例えば：

<script>
$(document).ready(function(){
    $("#an_element").css("border", "1px solid #333");
});
</script>

<div id="an_element">Test</a>

これにより、要素の周囲に ID「an_element」の境界線が追加されます。

jQuery セレクター

jQuery CSS

于 2012-11-13T08:28:51.897 に答える