Вот функция, которую я написал. Хорошо работает, чтобы получить ближайший элемент, имеющий определенный атрибут:

// 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);
}

Можно ли написать что-то подобное для стилей? Например. Я хочу выбрать любые элементы, у которых есть style="...fill:..."?

2
user1283776 2 Сен 2020 в 09:59

2 ответа

Лучший ответ

Обновить

Другой подход - соответствие двум правилам. Первое правило «начать с» соответствует: 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>

__

Вы можете использовать селектор атрибутов и искать {{ X0}}, содержащее выбранную вами строку. Однако пустое пространство имеет значение. Если вы ищете style*="color: red", но в вашем значении style нет пробелов между color: и red, селектор не найдет совпадения.

[attr * = value] Представляет элементы с именем атрибута attr, значение которого содержит по крайней мере одно вхождение значения в строке.

Примере:

div[style*="color: red"] {
  text-decoration: underline;
}
<div style="color: blue;">Regular div
</div>

<div style="color: red;">Add an underline
</div>
2
Andy Hoffman 2 Сен 2020 в 07:36

Пытаться:

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

Это работает, если атрибут стиля начинается с color: red .

0
AbsoluteBeginner 2 Сен 2020 в 07:42