JavaScript:使用 marginLeft 将评级星星放置在图像上

JavaScript: Using marginLeft to position rating stars over image

本文关键字：图像 星星 使用 marginLeft JavaScript      更新时间：2023-09-26

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

为此，我正在利用： 

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

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

插件

正在将示例 2 选择设置为显示：无，因此，对它的任何更改都不会有用。

你应该直接苹果你的css 

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

例如，你可以给它

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

但是它将在图像下方，因此您可以给它z索引

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/

相关文章：