Не удается получить левую позицию с глобальной таблицей стилей в JavaScript - PullRequest
Новая
       24

Не удается получить левую позицию с глобальной таблицей стилей в JavaScript

0 голосов
/ 08 декабря 2010

Мне нужно получить верхнюю левую позицию изображения в JavaScript. Я определяю местоположение изображения в глобальной таблице стилей: 

<style type="text/css">
img.movable { position:relative; top:0px; left:375px; }
</style>

Когда я определяю изображение, используя глобальный стиль 

<img id="image11" class="movable" src="testimage.jpg" onclick="jump()" />

Атрибут style.left пуст: 

<script type="text/javascript">
function jump() {
    xpos = document.getElementById("image11").style.left;
    alert( "style.left="+xpos );

    xpos = document.getElementById("image11").offsetLeft;
    alert( "offsetLeft="+xpos );
}
</script>

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

<img id="image11" style="position:relative; top:0px; left:375px;" src="logo.jpg" onclick="jump()" />

style.left содержит значение.

Это поведение одинаково для IE8 и Firefox. Есть идеи, почему это так?

Приветствия

Martin.

Ответы [ 4 ]

0 голосов
/ 14 февраля 2017

Получить левый элемент данного элемента HTMLE 

function getHTMLElementLeft(HTMLElement, left)
{
    if (left == undefined)
    {
        var left = 0;
    }
    if (HTMLElement.nodeType == 1)
    {
        left += HTMLElement.offsetLeft;
        if (HTMLElement.offsetParent)
        {
            left = getHTMLElementLeft(HTMLElement.offsetParent, left);
        }
    }
    return left;
}
0 голосов
/ 08 декабря 2010

Элемент DOM, представляющий указанный вами тег IMG, имеет собственное свойство стиля, и его значения будут переопределять любые данные, заданные глобальными переменными. К сожалению, в этом случае свойство указанного вами элемента действительно будет пустым, поскольку значения не каскадируются до уровня объекта JavaScript.

Вам потребуется получить позицию либо из свойства offsetLeft, либо из самого правила CSS.

0 голосов
/ 08 декабря 2010

.style свойства относятся только к встроенному CSS.Таким образом, стили, указанные в таблице стилей, не будут присутствовать в списке .style.Если вы хотите получить положение элемента на странице (в отличие от области просмотра), должно работать что-то вроде этого: 

function getNodePosition(node) {
  var top = left = 0;
  while (node) {        
    if (node.tagName) {
        top = top + node.offsetTop;
        left = left + node.offsetLeft;      
        node = node.offsetParent;
    } else {
        node = node.parentNode;
    }
  } 
  return [top, left];
}

Адаптировано из Quirksmode.OffsetTop и OffsetLeft относятся к родительскому элементу, поэтому он выполняет итерацию по дереву, чтобы получить общее смещение и, следовательно, положение страницы.Если вы хотите узнать положение относительно области просмотра, вы можете настроить значения, возвращаемые здесь, на расстояние прокрутки.

0 голосов
/ 08 декабря 2010

el.style фактически является картой всех свойств css, примененных с использованием атрибута style.Чтобы получить стили, определенные в таблицах стилей или стилях браузера по умолчанию, вам нужно использовать компьютерный стиль. Quirksmode, как обычно, является первой остановкой .

...