通过样式属性中的CSS属性值选择HTML元素

Question

我有这样的HTML：

…
<div style="top: 252px; left: 54px;"></div> 
<div style="top: 252px; left: 162px;"></div> 
<div style="top: 288px; left: 108px;"></div>
…

我有一个这样的JavaScript对象文字：

var pos = { top: 252, left: 54 };

我想选择具有object文字指示的位置的元素。位置是唯一的，因此只会选择一个元素。

谢谢你的回答。

Answer 1

功劳归功于这里的原始海报；

jQuery find by inline css attribute

该函数是'styleEquals‘，可以实现为；

jQuery.extend(jQuery.expr[':'], {
    styleEquals: function(a, i, m){
        var styles = $(a).attr("style").split(" ")
        var found = false;
        for (var i = 0; i < styles.length; i++) {
                if (styles[i]===m[3]) {
                        found = true;
                        break;
                }
        }
        return found;
    }
});

然后，您可以使用新的jquery扩展函数按样式属性值搜索元素，例如；

$("div:styleEquals('top=252px'):styleEquals('left:54px')");

Answer 2

我能说的就是不要这样做！

如果您可以向div添加一个唯一的位置样式，那么您可以同样轻松地同时添加一个标识符。

使用此标识符来选择javascript中的元素，而不是css定位。

Answer 3

你可以像这样使用the jQuery JavaScript library开箱即用：

var pos = { top: 252, left: 54 };
$('div[style*="top: ' + pos.top + 'px"][style*="left: ' + pos.left + 'px"]');

您需要确保一致地使用空格。如果您键入：

<div style="top:252px; left:54px;"></div>

建议的选择器将不起作用。

您还可以使用我的示例代码将其他CSS属性添加到style属性，顺序并不重要。下面是一个示例：

<div style="left: 54px; background: gray; top: 252px;"></div>