Показать сообщение отдельно
  #10 (permalink)  
Старый 05.07.2018, 15:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

стиль псевдо-элемента 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>
Ответить с цитированием