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

您可以使用 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 回答
1

考虑下面的 jQuery

$('.cls').css({
    "font-size":"15px",
    "font-family":"Arial",
    "border":"1px solid blue",
    "background-color":"yellow"
});

干杯:-)

于 2013-09-06T09:43:55.017 回答
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 回答
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 回答