如何找到应用了边框 [border-radius] 等的所有元素？

Posted 2023-03-06

【中文标题】如何找到应用了边框 [border-radius] 等的所有元素？

【英文标题】：How can I find all the elements with border [border-radius] etc applied?

【发布时间】：2022-01-21 21:40:26

【问题描述】：

例如，我可以查询具有 title 属性的元素；

$$('*[title]')

假设我想找到所有应用了边框/或边框半径的元素，我尝试了一些查询，但没有奏效。

$$('*[border-width]')
// returns nothing
$$('*[border-]')
// returns nothings

这适用于类级别，但我尝试了一些内联样式，但仍然不起作用。

那么如何找到应用了某些特定边框、填充等的元素呢？

【问题讨论】：

只有在元素具有该属性时才能找到它们，如<div border-width="1px">。这与您可能打算搜索的内容不同：<div style="border-width: 1px;">。 $$('[style*=border]') 或许你可以侥幸逃脱。

如果您知道样式是通过 style="..." 内联应用的，您可以在 @Ouroborous 评论中找到它们（带有“逃避”警告），但如果它们是从类中挑选样式我认为您必须调用一些 javascript 来查看计算样式的所有内容。

【参考方案1】：

工作演示： https://dojo.telerik.com/IlOVEsAS/7

function getElementByCSSProps(props)
    var elements = $("*").filter(function(e)
       var borderWidth = parseInt($(this).css(props));
       return borderWidth > 0;
    );
  return elements;

上面的函数会根据传入的参数返回元素。

例如 getElementByCSSProps("border-width"); - 此行将返回所有带边框的元素。

getElementByCSSProps("border-radius"); - 此行将返回所有具有边界半径的元素。