Как вы находите координаты псевдоэлементов? - PullRequest
Новая
       34

Как вы находите координаты псевдоэлементов?

0 голосов
/ 07 октября 2018

Я искал ответ на этот вопрос, но не смог найти правильный.Давайте возьмем следующий веб-сайт в качестве примера: https://www.atlassian.com/devops

Перед следующим элементом есть псевдоэлемент: 

var e = document.querySelector('li[class=language-selector]');
e.getClientRects();
top:    9797
bottom: 9818
left:   78
right:  162
x:      78
y:      9797
width:  85
height: 21

Функция window.getComputedStyle возвращает некоторые значения для top, bottom,left и т.д .: 

window.getComputedStyle(e, ':before').top;      //10.5      
window.getComputedStyle(e, ':before').bottom;   //-9.5      
window.getComputedStyle(e, ':before').left;     //-26       
window.getComputedStyle(e, ':before').right;    //90.6      
window.getComputedStyle(e, ':before').x;        //0
window.getComputedStyle(e, ':before').y;        //0
window.getComputedStyle(e, ':before').width;    //20
window.getComputedStyle(e, ':before').height;   //20

Сначала это кажется относительными значениями базового элемента, но если я проверяю другой элемент на той же странице, поведение кажется несовместимым: 

var e3=document.querySelectorAll('blockquote[class="cite large-quote"]')[0];
top:    2303
bottom: 2408
left:   78
right:  1038
x:      78
y:      2303
width:  960
height: 105

Функция window.getComputedStyle возвращает следующее: 

window.getComputedStyle(e3, ':before').top;     //-25
window.getComputedStyle(e3, ':before').bottom;  //-50
window.getComputedStyle(e3, ':before').left;    //0
window.getComputedStyle(e3, ':before').right;   //889.25
window.getComputedStyle(e3, ':before').x;       //0
window.getComputedStyle(e3, ':before').y;       //0
window.getComputedStyle(e3, ':before').width;   //70.75
window.getComputedStyle(e3, ':before').height;  //180

Например, верх и низ первого псевдоэлемента равны 10,5 и -9,5, а (10,5) - (-9,5) - это высотапсевдоэлемент (20).

Верх и низ второго псевдоэлемента составляют -25 и -50, но высота псевдоэлемента равна 180. Они оба имеют "абсолютное" в своем "положении"приписывать.Таким образом, поведение противоречиво.

Будет очень признательно, если кто-то сможет пролить свет на то, как получить положение или координаты псевдоэлементов.

1 Ответ

0 голосов
/ 07 октября 2018

Свойство css bottom отличается от свойства bottom ограничивающего прямоугольника.Тот факт, что значения top и bottom css в конечном итоге являются высотой псевдоэлемента в первом тесте, является просто совпадением.

Ограничительный прямоугольник bottom рассчитывается на основе его положения y и его высоты:

https://drafts.fxtf.org/geometry/#dom-domrectreadonly-domrect-bottom

Атрибут bottom при получении должен возвращать max (координата y, координата y + размерность).

CSS *Свойство 1015 * однако является значением позиции.С позиционируемым элементом absolute:

https://www.w3.org/TR/CSS2/visuren.html#propdef-bottom

Как и 'top', но указывает, насколько далеко край нижнего поля блока смещен над основанием блока, содержащего блок.,

Таким образом, вы не можете просто использовать формулу bottom-top, чтобы получить высоту псевдоэлемента.Вы должны принять во внимание высоту ближайшего расположенного элемента контейнера, в вашем случае это цитата.

То же самое для элемента блок цитаты: его высота равна 105px.Верхняя часть цитаты 25px выше верхней части, а ее нижняя часть 50px ниже нижней.С этими значениями вы получите высоту псевдоэлемента: 

105 - -25 - -50 = 180

Что касается координат: свойства x, y кажутся специфичными для браузера, так как их нет в Firefox, IE и т. Д. И я не могу найтичто они должны держать.Кроме того, значения в ограничительной рамке - это просто левые, верхние значения.

Поэтому, если вы хотите вычислить левые, верхние значения, вам придется использовать его левые, верхние значения и снова учитывать самые близкие позиции.местонахождение родителя 

var rect = e.getClientRects();
var pseudoStyle = window.getComputedStyle(e, ':before');

//find the elements location in the page
//taking into account page scrolling
var top = rect.top + win.pageYOffset - document.documentElement.clientTop;
var left = rect.left + win.pageXOffset - document.documentElement.clientLeft;

//modify those with the pseudo element's to get its location
top += parseInt(pseudoStyle.top,10);
left += parseInt(pseudoStyle.left,10);
...