获取内联样式中的元素属性
Get element attributes within inline styles
我有以下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或香草精
在jQuery中,您可以执行$(this).css('left')
$(".container> .class").each(function(){
var thisLeft = $(this).css('left');
});
正如@Fred所说,this.style.left
的使用不关心使用样式块或外部css文件应用于元素的样式,所以只使用$.fn.css
方法。
另一个解决方案是使用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>
相关文章:
- javascript来显示元素属性
- 自定义HTML元素属性未显示-Web组件
- 主元素属性?(或技术)
- 使用模板后,使用Angular获取元素属性值
- 如何从不同范围外的元素属性中获取求值表达式
- 可以't访问元素属性(如果已明确设置)
- 传递引用 jQuery 后无法访问元素属性
- 如何替换元素属性中的部分文本
- 添加新元素属性
- 如何使用jQuery访问父元素属性
- 使用jQuery.attr()方法获取元素属性
- 修改时,哪些DOM元素属性会导致浏览器执行回流操作
- Javascript数据将元素属性绑定到URL中的锚href
- 初始化可从元素属性值观察到的Knockout
- 获取内联样式中的元素属性
- 如何在 html 元素属性中使用 Angular 2 外推法
- 将元素属性与 javascript 折叠方法结合使用时,引导折叠无法正常工作
- 如何观察聚合物元素属性值从索引.html的变化
- 使用 JavaScript 修改 DOM 元素属性
- 聚合物节点到元素属性