Question

我有以下html块：

<div class="container">
 <div class="class" style="left:100px; top:0px">
 <div class="class" style="left:200px; top:0px">
 <div class="class" style="left:200px; top:100px">
</div>

我需要从内联css获取每个位置，我该怎么做？

我知道我不能使用.attr()或js getAttribute，因为这将返回整个样式块。

理想情况下，我喜欢这样的事情：

$(".container> .class").each(function(){
  var context = $(this);
  var thisLeft = context.left; // which I know is incorrect
}

这可能吗？ JQuery或vanilla很好

Answer 1

在jQuery中，你会做$(this).css('left')

$(".container> .class").each(function(){
    var thisLeft = $(this).css('left');
});

正如@Fred所说，this.style.left的使用并不关心使用样式块或外部css文件应用于元素的样式，因此只需使用$.fn.css方法。

Answer 2

Anoter解决方案是使用jquery map并获取所有类似的值：

var pos = $(".container > .class").map(function() {
  return {
    left: $(this).css("left"),
    top: $(this).css("top"),
    right: $(this).css("top"),
    bottom: $(this).css("bottom"),
  }
}).get();

console.log(pos);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="class" style="left:100px; top:0px"></div>
  <div class="class" style="left:200px; top:0px"></div>
  <div class="class" style="left:200px; top:100px"></div>
</div>

获取内联样式中的元素属性

2 个答案: