1

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 でも変更しました)。また、クラス センターを使用してすべての要素に対して関数を繰り返すコードを少し挿入しました。問題は、それが機能せず、どこが間違っているのかわかりません..

何か案は？

4

4 に答える 4

0

document.getElementsByClassName('center')単一の要素ではなく、そのクラス名を持つすべての要素を含む NodeList を返します。使用する場合は、ループする必要があります。

しかし、あなたは決して電話setContent()しません。

を呼び出します$(this).setContent();。$それが jQuery であると仮定するとsetContent、jQuery プラグインとして表現し、DOM を検索する代わりに要素をフェッチする必要があります (呼び出しthisで DOM を既に検索しているため) 。$('.center')

于 2013-02-20T13:23:16.033 に答える
0

まず第一に、document.getElementByClassNameは DOM 要素を 1 つだけ返すのではなく、クラス「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>
于 2013-02-20T13:44:02.387 に答える
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);
});
于 2013-02-20T13:24:34.387 に答える
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();
        }
于 2013-02-20T13:26:04.223 に答える