1

記述子に一致する現在の要素にスタイルを適用するだけでなく、jQuery（または任意のjavascript）にCSSスキームを変更させる方法はありますか？

私のcssにこれがあるとしましょう.bla{ width: 200px;}。実行する$('.bla').css('width', 300);と、jQueryはこれを既存の要素にのみ適用します。

私が欲しいのは、新しい幅を新しい.bla要素のルールにする方法です。そのため、.bla要素を追加し続けると、幅は300になります。

これを行う方法はありますか？

4

3 に答える 3

2

これを試してください：

var style = $('<style>body { background: green; }</style>')
$('html > head').append(style);

これはこのリンクから取得されます

于 2012-12-29T22:30:17.643 に答える
0

あなたが実行するとき、$('.bla').css('width', 300);それはあなたのページの状態によるものです。

この条件を変数に格納すると、一致する新しい要素を追加するたびに、それらを変更する必要があるかどうかを確認できます。

var someCondition=false;

/* later in code*/
$('.bla').css('width', 300);
someCondition=true;

/* then when add elements*/

var newBla=$('<div class="bla">')
if( someConditon){
  newBla.css('width', 300);
}

CSSを使用してこれを行い、代わりにクラスを適用した場合は、次を使用できます。

toggleClass( 'bla_300_class', someCondition); /* second arument is boolean to add or remove*/
于 2012-12-29T22:34:04.273 に答える
0

あなたはこのようにすることができます：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
</head>
<body>
<div class="style">
<style>.bla{ width: 200px;}</style>
</div>
<div id="divs"></div>

</div>
<button id="adddiv">Add div</button>
<button id="changeWidth">Click To Change Width</button>
<script>
$(function(){
$("#adddiv").click(function(){
$("#divs").append('<div class="bla" style="border:1px solid red;height:20px;margin:2px;">');
});
$("#changeWidth").click(function(){
$(".style").html("<style>.bla{width:300px;}</style>")
});
});
</script>
</html>

ここでスクリプトをオンラインでテストできますJsFiddle

于 2012-12-29T22:39:45.917 に答える