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

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

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

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

источник

2015-06-21 sbichenko

вместо вы можете использовать , так как он не будет иметь заранее определенные стили ... – dandavis

@dandavis это не мешает элементу изменять правила CSS. Например, селектора ': nth-child' могут сломаться. – sbichenko

ну, нет простого/идеального способа, или это было бы предложено к настоящему времени. Я думаю, дает вам наилучшее приближение к тому, что вы хотите. я не помню, чтобы видеть, и не мог найти, просматривая некоторые большие библиотеки, «nth-child» без тега или класса, запертого спереди ... Я думаю, что вероятность конфликтов была бы минутной и полу- адресация. например, временное применение только для измерения не позволит вам выглядеть более чем за несколько мсек, и вы можете вставить дополнительный узел спереди, а затем повторить сравнение с фильтрами/обнаружением правил 'parent *: nth-child' ... – dandavis

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

Используйте родительский элемент 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>

источник

2015-06-21 13:06:25 sbichenko

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

Однако, необходимо учитывать следующее:

div {border: 1px solid black;}

<div>This <em>is</em> a <strong>test</strong></div>

Вы не можете сказать, что "Это" и "" каждый имеет границу. Было бы правильно сказать, что «Это» имеет верхние нижние левые границы, а «а» имеет только верхние границы? Это сомнительно.

Если вы ограничиваете себя стилями, которые специально применяются к тексту (цвет, фон, текст, украшение, шрифт и т. Д.), Применение getComputedStyle() на parentNode должно всегда работать.

источник

2015-06-21 11:15:25

Есть ли надежный способ получить только стили, которые специально применяются к тексту? – sbichenko

Да, просто выберите стили, которые применяются к тексту. –

Пройдите через стандарты CSS и выберите эти стили? Это кажется очень ненадежным, поскольку стандарты подвержены изменениям, и люди ошибаются. – sbichenko

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

источник

2015-06-21 14:52:29 Rob

Попытка изменить вопрос, чтобы сделать его действительным. – sbichenko

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

ответ

Смежные вопросы