Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.02.2018, 09:07
Аспирант
Отправить личное сообщение для милт Посмотреть профиль Найти все сообщения от милт
 
Регистрация: 28.06.2014
Сообщений: 55

Получить координаты псевдоэлемента before или after
Как получить координаты псевдоэлементов before или after? В интернете нет никакой информации об этом
Ответить с цитированием
  #2 (permalink)  
Старый 03.02.2018, 11:50
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Замените псевдо-элементы на "настоящие" и работайте с ними.
Ответить с цитированием
  #3 (permalink)  
Старый 03.02.2018, 11:54
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Потому что тебе это не должно быть нужно. Псевдоэлементы это по задумке маленькие детали оформления и не должны учавствовать в чём-то большем.
Можно конечно получить текущие стили getComputedStyle(element, ":before"), а потом вручную вывести из этого координаты.
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 27.05.2018, 20:31
Аспирант
Отправить личное сообщение для милт Посмотреть профиль Найти все сообщения от милт
 
Регистрация: 28.06.2014
Сообщений: 55

Сообщение от Aetae Посмотреть сообщение
Можно конечно получить текущие стили getComputedStyle(element, ":before"), а потом вручную вывести из этого координаты.
Можете подсказать как вывести координаты вручную?
Ответить с цитированием
  #5 (permalink)  
Старый 28.05.2018, 04:13
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

var bef = getComputedStyle(document.querySelector('.el'),':before');
bef.top
bef.left
Ответить с цитированием
  #6 (permalink)  
Старый 04.07.2018, 20:51
Аспирант
Отправить личное сообщение для милт Посмотреть профиль Найти все сообщения от милт
 
Регистрация: 28.06.2014
Сообщений: 55

Сообщение от j0hnik Посмотреть сообщение
var bef = getComputedStyle(document.querySelector('.el'),':before');
bef.top
bef.left
А если там прописано 'auto' тогда как?
Ответить с цитированием
  #7 (permalink)  
Старый 04.07.2018, 21:03
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Ручками, учитывая всю логику блочной модели.
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 04.07.2018, 23:19
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Всегда можно получить координаты самого элемента и прибавить к ним нужные значения (отступов, бордюров и прочего что там есть)
Ответить с цитированием
  #9 (permalink)  
Старый 05.07.2018, 14:42
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

j0hnik,
увы, не всё так просто )
http://jsfiddle.net/9mc7xoqt/
здесь координаты ::афтера не связаны с его владельцем
Ответить с цитированием
  #10 (permalink)  
Старый 05.07.2018, 15:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

стиль псевдо-элемента top/left
Alexandroppolus,
а если так?
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.parent {
  position: relative;
  width: 300px;
  border: 1px solid black;
}
.m {
  padding: 40px;
}
.test {
  background: #999;
  height: 100px;
}
.test::after {
  content: "after";
  background: red;
  position: absolute;
  top: 5px;
  left: 5px;
}

  </style>


</head>

<body>
<div class="parent">
<div class="m">
<div class="test">

</div>
</div>
</div>
 <script>
function getOffsetSum(elem) {
  var top = 0,
    left = 0;

  while (elem) {
    top = top + parseInt(elem.offsetTop);
    left = left + parseInt(elem.offsetLeft);
    elem = elem.offsetParent;
  }

  return {
    top: top,
    left: left
  };
}
function getStyle(parent, pseudo, style)
{
parent = document.querySelector(parent)
var stylePseudo = getComputedStyle(parent,pseudo);
var styleParent = getComputedStyle(parent);
var positionPseudo = stylePseudo.position;
var positionParent = styleParent.position;
if(positionPseudo == "absolute" && positionParent != "relative") parent = parent.offsetParent;
if(positionPseudo == "fixed") parent = document.body;
styleParent = getComputedStyle(parent);
return parseInt(stylePseudo[style], 10) + getOffsetSum(parent)[style] + pageYOffset
}


alert(getStyle(".test", "::after", "top"));




  </script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты текстового узла милт Events/DOM/Window 7 18.01.2018 23:16
Получить все точки отрезка прямой? Gozar Оффтопик 84 29.12.2014 16:18
Посоветуйте самоучитель или обучающий сайт или видео курсы Seva1986 (X)HTML/CSS 14 26.01.2012 22:03
как получить загружений урл iframe или frame NOCaut Events/DOM/Window 0 15.11.2011 14:51
Можно ли получить имя экземпляра объекта внутри самого объекта? Ichigeki Общие вопросы Javascript 9 14.11.2008 19:00