Question

有没有办法让jQuery（或任何javascript）更改CSS方案而不是仅仅将样式应用于与描述符匹配的当前元素？

假设我的css .bla{ width: 200px;}上有这个。如果我运行$('.bla').css('width', 300);，那么jQuery只会将其应用于现有元素。

我想要的是一种使新宽度成为新的.bla元素规则的方法。为了使它，如果我继续添加.bla元素，那么它们将是300宽度。

有办法做到这一点吗？

Answer 1

试试这个：

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

这取自this链接

Answer 2

当您运行$('.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*/

Answer 3

你可以这样做：

<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

在线测试脚本

如何使jQuery css影响即将到来的元素

3 个答案: