0

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

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

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

4

3 回答 3

0

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

于 2012-12-13T22:09:09.783 回答
0

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

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-topastop是为了允许像top:50%. 当然，margin-top也可以是百分比，这将是一个问题，但频率较低。

于 2012-12-13T22:10:26.840 回答
0

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

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

js（jquery方法）：

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

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

于 2012-12-13T22:11:47.180 回答