5

重複の可能性:
Javascript で <style> タグを作成する方法

java-scriptを使って動的フォームを書いています。java-script 自体にスタイルを追加したい。スタイルを追加するコードをいくつか書きます。しかし、それは機能していません。これは私のプロジェクトで書いているコードです。

var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.body.appendChild(sheet);

誰でも私を助けてください。

4

5 に答える 5

2

コードは問題ありませんが、適切なタイミングで呼び出していないと思うので、ボディタグが読み込まれたときに呼び出します

 window.addEventListener('DOMContentLoaded',function(){
    var sheet = document.createElement('style'); 
    sheet.type="text/css"; 
    sheet.innerHTML = "body{color:red;}"; 
    document.body.appendChild(sheet);
    }, false);
于 2012-07-23T14:21:58.890 に答える
1

クラスを介してスタイルを追加しないのはなぜですか?

.blue {
   background-color: blue;   
}​

document.body.className = 'blue';​

http://jsfiddle.net/kf8Nd/

スタイルシート全体が本当に必要な場合は、代わりにヘッダーに追加してください。

var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.head.appendChild(sheet); // head, not body
于 2012-07-23T14:23:14.600 に答える
1

ここでは、知識を増やすためのリソースをさらに入手できます。そして、例は非常に役立つと確信しています! あなたもTHISのように役立ついくつかの SO の質問があります。--クレジットピーター・ボートン

これは、IE、FF、Opera でテストされています。

var css = 'h1 { background: red; }',
    head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if(style.styleSheet){
    style.styleSheet.cssText = css;
}else{
    style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

要素にクラスを追加するには:

document.getElementById("MyElement").className += " MyClass";

要素からクラスを削除するには:

document.getElementById("MyElement").className = 
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/ , '' )
/* code wrapped for readability - above is all one statement */

onclick イベントでこれを行うには:

<script type="text/javascript">
    function changeClass()
    {
        // code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>


さらに良いことに、次のことを可能にするフレームワーク (この例では jQuery) を使用します。

$j('#MyElement').addClass('MyClass');

$j('#MyElement').removeClass('MyClass');

$j('#MyElement').toggleClass('MyClass');

また:

<script type="text/javascript">
    function changeClass()
    {
        // code examples from above
    }

    $j(':button:contains(My Button)').click(changeClass);
</script>
...
<button>My Button</button>

これにより、HTML マークアップが JS 対話ロジックから分離されます。これにより、特に大規模で複雑なアプリケーションでは、メンテナンスが大幅に容易になります。

于 2012-07-23T14:25:22.683 に答える
0

body ではなく head 要素にスタイルを追加する

var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.head.appendChild(sheet);
于 2012-07-23T14:24:18.857 に答える
0 
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body{color:red;}';
document.getElementsByTagName('head')[0].appendChild(style);
于 2012-07-23T14:24:55.957 に答える