在 HTML 页面中获取所有带有 `position:fixed` 的元素？

Posted 2023-05-09

【中文标题】在 HTML 页面中获取所有带有 `position:fixed` 的元素？

【英文标题】：Get all elements with `position:fixed` in an HTML page?

【发布时间】：2016-05-05 10:22:51

【问题描述】：

这样做的原因：我正在调试网页的 css .. 出现了一些元素，但它们不应该出现。我怀疑这是元素定位的问题。因此我想找到这些定位的元素并一一检查。

【问题讨论】：

你有什么问题？

@SudiptaMaiti 看到标题了吗？

不知道为什么你在用 jquery 投票时没有用 jquery 标记这个问题

@user2181397 哎呀……忘了。会做:)

@songyy：我编辑了答案以包含一个普通的 javascript 方法

【参考方案1】：

这个是使用 jQuery 的。我希望你能找到它。

 var find = $('*').filter(function ()  
        return $(this).css('position') == 'fixed';
    );

我认为这个使用纯 javascript 工作：

var elems = document.body.getElementsByTagName("*");
var len = elems.length

for (var i=0;i<len;i++) 

    if (window.getComputedStyle(elems[i],null).getPropertyValue('position') == 'fixed') 
        console.log(elems[i])
    

【讨论】：

@songyy：很高兴它有帮助。如果你觉得有用，请投票。谢谢

【参考方案2】：

这是一个 ES6 版本，它为您提供了这些元素的数组以供进一步处理：

let fixedElements = [...document.body.getElementsByTagName("*")].filter(
    x => getComputedStyle(x, null).getPropertyValue("position") === "fixed"
);

【参考方案3】：

document.querySelector('*[style="position:fixed"]')

* 项指定所有标签名称。 [] 表示您正在寻找一个属性。您希望您的样式属性具有position:fixed。

如果您不使用 jQuery，这可能是您最简单的选择。

【讨论】：

你试过了吗？看看这个 jsfiddle jsfiddle.net/0xysh9wh/2 请更新

document.querySelector() 方法只查看标签属性。在不使用 jQuery 或其他 DOM 操作框架的情况下，您必须使用querySelectorAll('*') 组装所有元素（尽管我会用div 或其他东西替换那个'*'）然后使用线性搜索尝试匹配element.style.position到"fixed"

另外说明一下，我做了一点测试，jsfiddle似乎不支持querySelectorAll()的NodeList返回，所以你只会得到第一个元素。尝试在你的控制台运行它（类似于var a = document.querySelectorAll('*'); console.log(a)），你会看到你有一个可迭代的对象

@wilusdaman，如果元素由级联样式表（不是其样式属性）设置样式，则必须使用 getComputedStyle，element.style.position 将在小提琴中为空。而且您的选择器过于本地化，即使这样也行不通：jsfiddle.net/0xysh9wh/3

【参考方案4】：

试试这个：

var elements = $('*').filter(function ()  
    return this.style.position == 'fixed';
);

它将为您提供所有位置固定的元素。

【讨论】：

我试过这个：$('*').filter(function (idx, ele) console.log(ele.style.position); return true;); 但有趣的是......我没有得到固定位置（相对或绝对）的元素

我实际上认为你的方法应该可行..但我也不知道有什么问题

我相信这只有在样式内联时才有效。

@geckob 啊是啊哈哈 :)