Javascript函数不会重复

时间:2013-02-20 13:18:42

标签: javascript

我正试图在Javascript的帮助下对网站上的每个.class进行verticaly对齐。到目前为止我得到了这个:

<script type="text/javascript">
        function setContent() {
            var windowHeight = 67;
            if (windowHeight > 0) {
                var contentElement = document.getElementById('center');
                var contentHeight = contentElement.offsetHeight;
                if (windowHeight - contentHeight > 0) {
                    contentElement.style.position = 'relative';
                    contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                }
            }
        }
        window.onload = function() {
            setContent();
        }
    </script>

这只适用于带ID中心的第一个元素。由于我有6个元素需要更改,我将代码更改为:

<script type="text/javascript">
        function setContent() {
            var windowHeight = 67;
            if (windowHeight > 0) {
                var contentElement = document.getElementsByClassName('center');
                var contentHeight = contentElement.offsetHeight;
                if (windowHeight - contentHeight > 0) {
                    contentElement.style.position = 'relative';
                    contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                }
            }
        }
        $('.center').each(function(){
            $(this).setContent();
        });
    </script>

我更改了document.getElementById('center'); to document.getElementsByClassName('center');所以它需要所有的类(是的,我也在html中更改了它)。我还插入了一些代码,它们应该为具有类中心的每个元素重复该函数。问题是,它不起作用,我无法弄清楚它出错的地方..

有什么想法吗?

4 个答案:

答案 0 :(得分:0)

document.getElementsByClassName('center')返回一个NodeList,其中包含具有该类名的所有元素,而不是单个元素。如果你使用它,那么你需要循环它

你永远不会打电话给setContent()

您致电$(this).setContent();。如果我们假设$是jQuery,那么你必须将setContent表示为jQuery插件,并从this获取元素而不是搜索DOM(因为你已经搜索了带$('.center')电话的DOM。

答案 1 :(得分:0)

试试这个:

function setContent(contentElement) {
    var windowHeight = 67;
    if (windowHeight > 0) {
        var contentHeight = contentElement.offsetHeight;
        if (windowHeight - contentHeight > 0) {
            contentElement.style.position = 'relative';
            contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
        }
    }
}
$('.center').each(function(){
    setContent(this);
});

答案 2 :(得分:0)

尝试这些更改:

        function setContent() {
            var windowHeight = 67;
            if (windowHeight > 0) {
                var elems = document.getElementsByClassName('center');
                for(var i in elems) {
                  var contentElement = elems[i];
                  var contentHeight = contentElement.offsetHeight;
                  if (windowHeight - contentHeight > 0) {
                      contentElement.style.position = 'relative';
                      contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                  }
                }
            }
        }
        window.onload = function() {
            setContent();
        }

答案 3 :(得分:0)

首先,正如您所看到的,document.getElementByClassName不会返回一个DOM-Element,而是获得所有具有“center”类的节点的NodeList。 由于NodeList没有属性样式,因此您的修改无效。

$('.center').each(function(){
    $(this).setContent();
});

这里用类'center'迭代所有元素,但是你试图调用那些元素上实际上不存在的函数,所以它也没有效果。

当你使用jQuery时,我建议你试试这个:

<script type="text/javascript">
    function setContent(contentElement) {
        var windowHeight = 67;
        if (windowHeight > 0) {
            var contentHeight = contentElement.offsetHeight;
            if (windowHeight - contentHeight > 0) {
                contentElement.style.position = 'relative';
                contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
            }
        }
    }
    window.onload = function() {
        var centerElements = document.getElementByClassName('center')
        for(var i = 0; i < centerElements.length; i+=1)
            setContent(centerElements[i]);
    }
</script>