Question

如何使用javascript增加每个位置：在页面中修复多个像素？

例如：我有一个包含多个固定位置元素的网页，我使用javascript在顶部插入一个工具栏。现在工具栏占用了40px的空间，所有固定元素的位置都是40px。

我需要一些javascript，我可以在引入工具栏的同时触发，这将增加40px固定的所有位置。

Answer 1

您可以通过修改JS中的样式属性来设置元素的顶部或底部CSS属性。

Answer 2

我想你必须做这样的事情：

var elems = document.all || document.getElementsByTagName("*");
// I know document.all isn't ideal, but it saves a function call if it's there ;)
var l = elems.length, i, stl;
window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle};
for( i=0; i<l; i++) {
  stl = window.getComputedStyle(elems[i]);
  if( stl.position === "fixed") {
    elems[i].style.marginTop = ((parseInt(stl.marginTop,10) || 0) + 40) + "px";
  }
}

使用margin-top而非top是允许top:50%之类的内容。当然，margin-top也可以是一个百分比，这可能是一个问题，但它不那么频繁。

Answer 3

您可以为每个固定元素提供一个公共类，然后定位所有这些元素：

<div class="fixed">
    some fixed element
</div>

js（jquery方法）：

$('.fixed').each(function(){
    $(this).css('top', $(this).css('top') + 40 + 'px'); 
});

如果不使用jquery，请参阅aurel的回答

增加固定的任何头寸

3 个答案: