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

Question

i am adding dynamically new html elements thru javascript, and those newly created html elements have a css class which already exists in a linked style.css file. how do i let this newly created element know about his css class, so that the styling by this class can effect the newly created html element.

my 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+'\"/>';
  }
 }

that class star should be popular to css file right after its creation. is there any make-popular function in jquery or so?

hope that i explained my problem well..

thanks

Answer 1

As long as the page already references the CSS file, then all you have to do is create the element with the class="star" attribute. I don't see what you ultimately do with the html variable, but assuming your element appears on the page with the class="star" attribute and you have a star css class declared properly, then that is all that is needed. Use an F12 developer tool to inspect the element in the browser to verify the class is being applied.

Example:

http://jsfiddle.net/mQKdc/

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

Edit: Note however, that input elements are difficult to style, because each OS(Win/Linux) and/or browser(IE,Firefox,Chrome) can provide their own styling of input elements. There are certain things you may find are difficult to style on them. In which case it's not really a javesceiprt problem, but a CSS problem. You'd need to ask a CSS related question showing exactly what 1) your CSS is, 2) what your goal is, 3) what your are seeing that indicates your current CSS doesn't meet the goal(Ie your problem).

Edit 2: Before sorting, the element's 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>

The input is there too, but the style is being applied to this a element. The star styling is applied to <a> elements:

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

After sorting, the div+a doesn't exist, only the input. So the elements that the style applies to( div.star-rating a do not exist :

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

So the HTML you are generating after sorting is incorrect, based on the HTML I'm seeing before sorting. Are you using some sort of plugin/library to generate the stars? If so, my guess is there is some function you would call to generate the proper HTML.

Solution: Looks like you are supposed to do something like this to run the .rating() function on each element you want the Star Rating Plugin to be activated on:

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

You just need to run this after generating the new elements.

Answer 2

If you are adding new html elements which are using existing Css, then those should be able to to use them by default. Are you having any issue with that?