如何使jQuery的css影響即將到來的元素

有沒有辦法讓jQuery（或任何javascript）更改CSS方案，而不是將樣式應用於匹配描述符的當前元素？如何使jQuery的css影響即將到來的元素

假設我在我的css .bla{ width: 200px;}上有這個。如果我運行$('.bla').css('width', 300);，那麼jQuery將僅將其應用於現有元素。

我想要的是一種使新寬度成爲新的.bla元素的規則的方法。要做到這一點，如果我不斷添加.bla元素，那麼它們的寬度將爲300。

有沒有辦法做到這一點？

2012-12-29 Diogo Melo

可以通過編程編輯現有規則。或者，你可以創建一個覆蓋該規則的新樣式表（也可以編程），例如，通過'body .bla {width：300px}'。 [CSSOM標準]（http://www.w3.org/TR/cssom/）定義了提供此功能的API。 –

如何添加新的.bla元素？ – lam3r4370

你真的應該考慮把它放在主樣式表中。因此，例如，一個'.wide .bla {width：300px;}'樣式，然後將其添加到父級。這將保持一切。 –

試試這個：

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

這是從this鏈接

來源

2012-12-29 22:30:17 Elad

採取當你運行$('.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-29 22:34:04 charlietfl

你可以這樣說：

<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-29 22:39:45 Anass

如何使jQuery的css影響即將到來的元素

回答

相關問題