javascript - Javascript 函数不会重复自身

Question

我试图在 Javascript 的帮助下垂直对齐网站上的每个 .class。到目前为止，我得到了这个：

<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'); 到 document.getElementsByClassName('center'); 所以它需要所有的类（是的，我也在 html 中改变了它）。我还插入了一些代码，应该为每个具有类中心的元素重复该函数。问题是，它不起作用，我不知道哪里出了问题..

有任何想法吗？

Answer 1

document.getElementsByClassName('center') returns a NodeList containing all the elements with that class name, not a single element. If you use it, then you need to loop over it.

You never call setContent() though.

You call $(this).setContent();. If we assume that $ is jQuery, then you would have to express setContent as a jQuery plugin, and fetch the element from this instead of searching the DOM (since you have already searched the DOM with the $('.center') call.

Answer 2

Try this:

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

Try with these changes:

        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

First of all, as you can see document.getElementByClassName does not return only one single DOM-Element, instead you get a NodeList of all the Nodes which have the class 'center'.
And as a NodeList does not have the property style, your modifications have no effect.

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

Here you iterate through all the elements with class 'center', but you are trying to call a function which actually does not exist on those elements, so it has not effect either.

As you are using jQuery i would recommend you to try this:

<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>