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

【问题标题】：Select HTML element by CSS property value in style attribute通过样式属性中的 CSS 属性值选择 HTML 元素
【发布时间】：2011-07-26 19:59:24
【问题描述】：

我有这样的 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 };

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

感谢您的回答。

【问题讨论】：

你可以在这里创建一个自定义选择器，这是一个可以帮助stackoverflow.com/questions/1180067/…的 SO 链接
您也可以使用.filter自己实现过滤（在.filter中使用.css）。
我已经在我的帖子中发布了正确的解决方案 + jsfiddle 示例。

标签： jquery

【解决方案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')");

【讨论】：

这个解决方案有效，所以我选择它作为接受的答案，但在我的问题中我最终使用了 id。

【解决方案2】：

我只能说不要这样做！

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

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

【讨论】：

好的。我当然可以，我只是想问是否有可能如何使用 css 值来做到这一点。
但您为什么要这样做？ css 用于样式元素，而不是识别它们！如果将两者混为一谈，您将制造潜在的维护噩梦！
我明白为什么，如果这是某种游戏呢？并且动态创建了数百个元素。预先为每个位置创建一个单独的 CSS 类是没有意义的。然后你必须以某种方式选择单个元素。我已经提出了一种使用 jQuery 开箱即用的方法。

【解决方案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>

【讨论】：

【解决方案4】：

当您生成这些 DIV 时，为它们分配唯一的 id 属性。然后您可以使用 id 属性检索 DIV 对象。

【讨论】：

【解决方案5】：

给他们一个类或 id 并使用 class/id 选择它们，它会快得多。否则，您需要找到它们并按 css 值进行过滤。

【讨论】：

【解决方案6】：

可以通过样式属性的内容来选择元素（注意空格）：

$('div[style*="top: 252px; left: 54px"]').css("color","red")

Example.

但就像 BonyT 所说的那样 - 你应该将值放入 id 或类中。

【讨论】：

【解决方案7】：

使用

function findElement (top, left) {
    return target = $('div').filter(function() {
        var div = $(this);
        if (parseInt(div.css('top')) == top && parseInt(div.css('left')) == left )
            return true;
        return false;
    });
}

见jsfiddle sample

【讨论】：