Question

我正试图在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中更改了它）。我还插入了一些代码，它们应该为具有类中心的每个元素重复该函数。问题是，它不起作用，我无法弄清楚它出错的地方..

有什么想法吗？

Answer 1

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

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

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

Answer 2

试试这个：

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);
});

Answer 3

尝试这些更改：

        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();
        }

Answer 4

首先，正如您所看到的，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>

Javascript函数不会重复

4 个答案: