Question

我通过javascript动态添加新的html元素，而那些新创建的html元素有一个已存在于链接的style.css文件中的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"属性的页面上并且你已经正确地声明了一个星形css类，那么这就是全部需要。使用F12开发人员工具检查浏览器中的元素以验证是否正在应用该类。

示例：

http://jsfiddle.net/mQKdc/

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

编辑但是请注意，输入元素很难设计样式，因为每个操作系统（Win / Linux）和/或浏览器（IE，Firefox，Chrome）都可以提供自己的输入元素样式。你可能会发现某些东西难以定型。在这种情况下，它不是一个真正的javesceiprt问题，而是一个CSS问题。你需要问一个CSS相关的问题，确切地说明你的CSS是什么，2）你的目标是什么，3）你所看到的表明你当前的CSS不符合目标（即你的问题）。 / p>
编辑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元素，那么默认情况下应该能够使用它们。你有任何问题吗？

如何将新创建的html元素绑定到其css

2 个答案: