1

ヘッダーが空のようにスタイルがあります

<style> 
.cls{

}
</style>

クリック例で動的に変更したい

<style> 
.cls{
    font-size: 15px;
    font-family  : Arial, Verdana;
    border: 1px solid blue;
    background-color: yellow;       
}
</style>

ここに私のコードがありますhttp://jsfiddle.net/nyf7T/

<script>
    function changeCSS () {
        var style = 'font-size: 15px;'
        +   'font-family  : Arial, Verdana;'
        +   'border: 1px solid blue ;'
        +   'background-color: yellow;'; 
        alert(style);
    }

</script>
<style> 
.cls{

}
</style>
<div>
    <table style="margin:5px;">
        <tr>
            <td class="cls">
               abcd
            </td>
        </tr>
    </table>
</div>

  <a href="#" onclick="changeCSS();">Setstyle</a>

その方法を教えてください。

4

6 に答える 6

2

あなたが求めているのは、CSS クラスのルールを変更することです。

CSSStyleSheet.insertRuleこれを行うには、メソッドを使用する必要があります。詳細はこちら

これらも見る必要があるかもしれません

document.styleSheetsページで使用されているスタイル シートを取得します。

styleSheet.cssRules特定のスタイル シートで cssRules を取得するため。

rule.selectorText物件→こちらをチェック

あなたの場合、このようなもの（またはより洗練されたバージョン）を試す必要があります

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.cls {
}
</style>
</head>

<body>
<div>
    <table style="margin:5px;">
        <tr>
            <td class="cls"> abcd </td>
        </tr>
    </table>
</div>
<a href="#" onClick="changeCSS();">Setstyle</a> 
<script>
        function changeCSS () {
           var myStyleSheet = document.styleSheets[0];

        var style = '.cls { font-size: 15px;'
            +   'font-family  : Arial, Verdana;'
            +   'border: 1px solid blue;'
            +   'background-color: yellow; }'; 

        myStyleSheet.insertRule(style, 0);
        }

    </script>
</body>
</html>

ここで動作バージョンを確認してくださいhttp://jsfiddle.net/dK65G/1/

于 2013-09-06T10:14:01.503 に答える
1

あなたの場合、以下のコードを使用できます

var style = '.cls{font-size: 15px;'
    +   'font-family  : Arial, Verdana;'
    +   'border: 1px solid blue;'
    +   'background-color: yellow;}'; 

document.getElementsByTagName('style')[0].innerHTML=style;

http://jsfiddle.net/nyf7T/8/

于 2013-09-06T10:02:32.503 に答える
1

jquery css 関数を使用できます。

ここに例があります：http://jsfiddle.net/nyf7T/6/

<script>
$(function(){
    $('.changecss').click (function(){
       $('.cls').css({
       'font-size': '15px',
       'font-family'  : 'Arial, Verdana',
       'border': '1px solid blue',
       'background-color': 'yellow'
      });
   });
});
</script>
于 2013-09-06T09:41:21.050 に答える
0

コードをクラスに入れることができます。

クラスを onclick 要素に設定します。

    function changeCSS () {
        $( "element" ).addClass( "theclass" );
    }

CSS で:

.theclass {
   font-size: 15px;
   font-family  : Arial, Verdana;
   border: 1px solid blue ;
   background-color: yellow;
}

クリックした要素を変更したい場合は、次のようにします。

function changeCSS (this) {
    $(this).addClass( "theclass" );
}

<a href="#" onclick="changeCSS(this);">Setstyle</a>

clou は、CSS を割り当てる前に設定することです。

于 2013-09-06T09:22:30.217 に答える
0 
<style> 
.cls{
    font-size: 15px;
    font-family  : Arial, Verdana;
    border: 1px solid blue;
    background-color: yellow;       
}

.newCls {
   font-size: 15px;
   font-family  : Arial, Verdana;
   border: 1px solid blue;
   background-color: yellow;
}
</style>


<a href="#" onclick="$(this).removeClass('cls').addClass('newCls');">Setstyle</a>
于 2013-09-06T09:29:35.410 に答える