如何使jQuery css影响后续元素_Jquery_Css

如何使jQuery css影响后续元素

jquery css

如何使jQuery css影响后续元素,jquery,css,Jquery,Css,有没有办法让jQuery（或任何javascript）更改CSS方案，而不是只将样式应用于与描述符匹配的当前元素假设我的css上有这个.bla{width:200px；}。如果我运行$（'.bla'）.css（'width'，300）则jQuery将仅将此应用于现有元素我想要的是一种方法，使新的宽度也成为新的.bla元素的规则。如果我继续添加.bla元素，那么它们的宽度将为300 有办法吗？试试这个： var style = $('<style>body { background

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

假设我的css上有这个

.bla{width:200px；}

。如果我运行

$（'.bla'）.css（'width'，300）则jQuery将仅将此应用于现有元素
我想要的是一种方法，使新的宽度也成为新的.bla元素的规则。如果我继续添加.bla元素，那么它们的宽度将为300
有办法吗？
试试这个：
var style = $('<style>body { background: green; }</style>')
$('html > head').append(style);

var style=$（'body{background:green；}'））
$（'html>head'）。追加（样式）；

这是在运行$（'.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);
}

您可以这样做：
<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>


.bla{宽度：200px；}
添加div
单击以更改宽度
$（函数（）{
$（“#adddiv”）。单击（函数（）{
$（“#divs”）。追加（“”）；
});
$（“#changeWidth”）。单击（函数（）{
$（“.style”）.html（“.bla{width:300px；}”）
});
});

您可以在此处在线测试脚本
可以通过编程方式编辑现有规则。或者，您可以创建一个新的样式表（也是以编程方式），该样式表将覆盖该规则，例如通过body.bla{width:300px}
。定义了提供此功能的API。如何添加新的BLA元素？您确实应该考虑将其保持在主样式表中。例如，使用.wide.bla{width:300px；}样式，然后将.wide添加到父级。这将使所有内容保持一致。@JamesS，它将被动态计算，考虑到$（'html'）.width（），并在调整大小事件时重新计算。@ŠimeVidas，它是通过$.get调用提交的原始html。我正在使用$（'#result'）.append（）插入它。
<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>