如何将新创建的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元素，则默认情况下这些元素应能够使用它们。 你有什么问题吗？