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

时间:2016-01-27 18:36:18

标签: javascript css margin-left

使用JavaScript插件为评论应用评级星标。这个[fiddle]包含大部分代码。星星来自下拉的位置(外部资源没有加载以显示这个小提琴)。星星在本地主机上显示正常,但我想将星星定位在中间的某个位置(或者可能在图像本身,无论在哪里)。

为此,我正在使用:

   $(function() {
    var _elm=document.getElementById('example2');
    _elm.style.marginLeft = "150px"; 
      $('#example2').barrating({
        theme: 'fontawesome-stars',
        readonly: true,
        initialRating: 3
      });    
 });
但是明星并没有改变他们的立场。那我如何定位星星呢? 完成后,没有控制台错误。

1 个答案:

答案 0 :(得分:1)

该插件将example2选择设置为display:none, 所以对它的任何改变都不会有用。

你应该直接将你的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;
}

小提琴 - https://jsfiddle.net/omwpz0tw/12/