Как получить воспринимаемый стиль текста node?

Метод window.getComputedStyle() принимает только узлы элемента. Есть ли способ надежно получить стиль, который определяет визуальное представление текста node?

Я понимаю, что узлы не могут иметь атрибуты style, но они, безусловно, стилизованы, поскольку они наследуют стили родительского элемента. Может ли быть способ получить все вычисленные стили из родительского элемента, которые имеют отношение к визуальному представлению текста node?

Обратите внимание, что обертка node в span не может быть и речи: это повлияет на правила CSS, такие как span:nth-child или span + span и т.д.

ОТВЕТЫ

Ответ 1

Я попробую сам.

  • Используйте window.getComputedStyle() в родительском элементе и сохраните имя тега и информацию о стиле.
  • Создайте новый элемент с сохраненным именем тега и назначьте ему стили с помощью атрибута style.
  • Добавить дочерний элемент <foo> (строго говоря, он должен иметь имя тега, которое не упоминается в текущих правилах CSS, так что они не влияют на него).
  • Прикрепите родительский элемент к <head> документа (специфичный для Webkit).
  • Используйте window.getComputedStyle() для дочернего элемента.
  • Задайте inline как значение свойства display (поскольку текстовые узлы всегда встроены).

Обратите внимание на результаты фрагмента кода. color красный, margin-left равен нулю, несмотря на то, что родитель имеет левое поле, а width (и height тоже) - auto.

var source = document.querySelector('.bar');
var sourceStyle = window.getComputedStyle(source);
var sourceTag = source.tagName;
var clone = document.createElement(sourceTag);
var child = document.createElement('foo');
var head = document.querySelector('head');

child.innerHTML = 1;
child.setAttribute('style', 'display: inline;');
clone.appendChild(child);
clone.setAttribute('style', sourceStyle.cssText);
head.appendChild(clone);
alert(window.getComputedStyle(source).marginLeft); // 100px
alert(window.getComputedStyle(child).color); // rgb(255, 0, 0);
alert(window.getComputedStyle(child).marginLeft); // 0px
alert(window.getComputedStyle(child).width); // auto
.bar {
  color: red;
  margin-left: 100px
  }
<html>
  <head>
    <title>An example</title>
  </head>
  <body>
    <div class="bar">
      foo
    </div>
  </body>
</html>

Ответ 2

Если текст node является единственным node в элементе, вы можете просто использовать getComputedStyle() на parentNode.

Однако рассмотрим следующее:

div {border: 1px solid black;}
<div>This <em>is</em> a <strong>test</strong></div>

Ответ 3

Ответ на ваш вопрос: вы не можете. Стили применяются к элементам и формируются по их содержанию. Текстовое содержимое элемента не написано напрямую, потому что это просто данные. Другие ответы и комментарии - это только предложения, чтобы получить стиль элемента, который не является тем, о чем вы просили. Так что вы просите не может быть сделано, потому что нет никакого стиля, применяемого к данным, текст node, элемента.