如何將新創建的html元素綁定到其CSS

Question

我正在通過javascript動態添加新的html元素，並且那些新創建的html元素具有一個CSS類，該類已經存在於鏈接的style.css文件中。 我如何讓這個新創建的元素知道他的CSS類，以便此類的樣式可以影響新創建的html元素。

我的js：

for(k=1;k<=5;k++){
  if(k==data[i]['price']){
html = html + '<input class=\"star\" type=\"radio\" name=\"test-5\" disabled=\"disabled\" value=\"'+k+'\" checked=\"checked\" />';
  }else{
html = html + '<input class=\"star\" type=\"radio\" name=\"test-6\" disabled=\"disabled\" value=\"'+k+'\"/>';
  }
 }

該類star創建后應立即在css文件中流行。 jQuery中是否有任何make-popular功能？

希望我能很好地解釋我的問題。

謝謝

Answer 1

只要頁面已引用CSS文件，那么您要做的就是創建具有class =“ star”屬性的元素。 我看不到最終要使用html變量做什么，但是假設您的元素出現在具有class="star"屬性的頁面上，並且您有正確聲明的star css類，則僅此而已。 使用F12開發人員工具檢查瀏覽器中的元素，以驗證是否正在應用該類。

例：

http://jsfiddle.net/mQKdc/

$(function(){
     $('#addToMe').html('<div class="star">test</div>');
});

編輯：但是請注意，輸入元素很難設置樣式，因為每個OS（Win / Linux）和/或瀏覽器（IE，Firefox，Chrome）都可以提供自己的輸入元素樣式。 您可能會發現某些難以在其上樣式化的東西。 在這種情況下，這實際上不是javesceiprt問題，而是CSS問題。 您需要問一個與CSS相關的問題，確切地說明1）您的CSS是什么，2）您的目標是什么，3）您所看到的表明您當前的CSS達不到目標（即您的問題）。

編輯2：在排序之前，元素的HTML：

<div role="text" aria-label="" class="star-rating rater-0 star star-rating-applied star-rating-readonly star-rating-on">
   <a title="2">2</a>
</div>

輸入也在那里，但是樣式已應用於此元素。 星型樣式應用於<a>元素：

div.star-rating a {
background: url(../images/star.gif) no-repeat 0 0px;
}

排序后，div + a不存在，只有輸入。 這樣的風格適用於（元素div.star-rating a不存在 ：

<input class="star" type="radio" name="test-1-rating-5" disabled="disabled" value="4">

因此，基於我在排序之前看到的HTML，排序后生成的HTML是不正確的。 您是否正在使用某種插件/庫來生成星星？ 如果是這樣，我想您會調用某些函數來生成正確的HTML。

解決方案：您似乎應該執行以下操作，才能在要激活星級評定插件的每個元素上運行.rating（）函數：

$('.star').rating();

您只需要在生成新元素之后運行它即可。

Answer 2

如果要添加使用現有Css的新html元素，則默認情況下這些元素應能夠使用它們。 你有什么問題嗎？