Question

为什么我会问这个问题，这有点长。

function topMag(x) {
  elem = x;

  do {
    elemTop += elem.offsetTop;
    elem = elem.offsetParent
  }
  while (elem != "[object HTMLBodyElement]");

  elem = x;
};

使用该功能，我想从顶部获取目标元素的高度。但代码不起作用，因为如果目标元素的位置是固定的，则元素的偏移量Parent返回false。没什么大不了的，问题有一个简单的解决方案。但这种解决方案的唯一方法是将样式设置为内联。如果将位置设置为具有外部或内部样式表的元素（或者未设置，则位置为静态），则style.position返回false。我的问题是2倍：为什么会发生这种情况，以及如何解决？谢谢你的回答。

function topMag(x) {
  elem = x;

  if (elem.style.position == "fixed") {
    elemTop = elem.offsetTop
  };

  else {
    do {
      elemTop += elem.offsetTop;
      elem = elem.offsetParent
    }
    while (elem != "[object HTMLBodyElement]");

    elem = x;
  }
};

Answer 1

访问元素的style属性会返回CSSStyleDeclarations Object，它本身具有每个CSS属性的属性。但是，当使用style属性时，此对象仅通过HTML中的style属性或JavaScript中的style属性选择已设置为内联样式的属性（因为HTML属性）映射到JavaScript属性，style属性是style属性的反映，style属性是设置内联样式的位置。）

对于通过样式表中的选择器设置的属性，您必须使用 window.getComputedStyle() 来检索反映所有CSS属性值的CSSStyleDeclarations对象。由CSS布局/渲染引擎计算。

最后，你的分号有一些语法问题需要解决，因此，你的函数看起来像这样：

function topMag(elem) {
  // Get the offsetTop property value:
  var ost = elem.offsetTop;

  // Check the position
  if (getComputedStyle(elem).position === "fixed") {
    elemTop = ost;
  } else {
    do {
      elemTop += ost
      elem = elem.offsetParent;
    } while (elem !== "[object HTMLBodyElement]");   
  }
}

为什么获取节点元素的样式属性在javascript中返回false？

1 个答案: