JavaScript:使用 marginLeft 在图像上定位评级星

Question

我正在使用 JavaScript 插件为评论应用星级。这[fiddle]有大部分代码。星星出现在下拉列表的位置(外部资源未加载以在 fiddle 中显示)。星星在本地主机上显示良好，但我想将星星定位在中间的某个位置(或者可能在图像本身的任何位置)。

为此，我正在使用:

   $(function() {
    var _elm=document.getElementById('example2');
    _elm.style.marginLeft = "150px"; 
      $('#example2').barrating({
        theme: 'fontawesome-stars',
        readonly: true,
        initialRating: 3
      });    
 });

但是星星不会改变它们的位置。那我该如何定位星星呢？ 对于完成，没有控制台错误。

Answer 1

插件正在将 example2 选择设置为显示:无， 因此，对其进行任何更改都不会有用。

你应该直接将你的CSS应用到

.br-theme-fontawesome-stars .br-widget

比如你可以给它

  margin-left:20px;
  margin-top:-50px;

但是它会在图像下面，所以你可以给它 z-index

z-index:100;

然后你会看到箭头上的变化。

最终结果将是:

.br-theme-fontawesome-stars .br-widget {
  height: 28px;
  white-space: nowrap;
  margin-left:20px;
  margin-top:-50px;
  z-index:100;
}

fiddle - https://jsfiddle.net/omwpz0tw/12/