有没有靠谱的select或者可以select基于样式的元素？

Question

这是我写的一个函数。获取具有特定属性的最近元素效果很好：

// Example of attribute if id

export function getClosestAttribute(
  element: SVGElement,
  attribute: keyof typeof svgAttributeToCssStyle,
  excludeElement: boolean
): string | null {
  let firstIncludedEl: Element | null = element;
  if (excludeElement) {
    firstIncludedEl = element.parentElement;
  }
  if (!firstIncludedEl) {
    return null;
  }
  const closestEl = firstIncludedEl.closest(`[${attribute}]`);
  if (!closestEl) {
    return null;
  }

  return closestEl.getAttribute(attribute);
}

是否可以为样式编写类似的东西？例如。我想 select 任何具有 style="...fill:..."?

的元素

Answer 1

更新

另一种方法是匹配两个规则。第一个“开始于”规则匹配：color: red，但不匹配 background-color: red.

div[style^="color:"] {
  text-decoration: underline;
}

当字符串出现在 style 值后面的任何位置时，第二条规则匹配：

div[style*=" color:"] {
  text-decoration: underline;
}

然后我们将它们链接在一起：

div[style^="color:"],
div[style*=" color:"] {
  text-decoration: underline;
  opacity: 0.5;
}

<div style="background-color: red;">Should not match
</div>

<div style="font-size: 20px; color: red;">Match
</div>

<div style="color: red; font-size: 32px;">Match
</div>

<div style="font-size: 20px; background-color: red;">Should not match
</div>

__

您可以使用 attribute selector 并查找包含您选择的字符串的 style 值。但是，白色 space 很重要。如果您正在寻找 style*="color: red" 但您的 style 值在 color: 和 red 之间没有 space，则选择器将 not 找到匹配项。

[attr*=value] Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

示例：

div[style*="color: red"] {
  text-decoration: underline;
}

<div style="color: blue;">Regular div
</div>

<div style="color: red;">Add an underline
</div>

Answer 2

尝试：

div[style^="color: red"] {
  text-decoration: underline;
}

如果样式属性以 color: red.

开头，则此方法有效

有没有靠谱的select或者可以select基于样式的元素？

Is there a reliable selector that can select elements based on styles?

css

queryselector

更新