JS関数が実行中かデバッグ中かに応じて異なる値が渡される

問題：js関数 "centerElementYParent"に渡されたときにidが "containerLnkMenu"の要素が親divに正しく配置されない関数内でGoogle Chromeのデバッガを使用しています。
"getComputedStyle（f、null）"呼び出しは、正常に実行された場合、高さが "0px"を返しますので、マージントップの '-57px'になります。JS関数が実行中かデバッグ中かに応じて異なる値が渡される

コメント：私はインターネット上で同様の問題を抱えている少数の人々を見つけましたが、自分の解決策を自分のニーズにマッピングする方法を見つけることができませんでした。
これについての助けに感謝します。
さらに詳しい説明が必要な場合はお知らせください。
私はこの問題から学ぶことができるので、詳細な回答や詳細な読者へのリンクを希望します（このエラーから学ぶことができます）。

<!DOCTYPE html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <!--[if lt IE 9]> 
 
\t \t \t <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
\t \t <![endif]--> 
 
\t \t <link rel="stylesheet" href="main.css"> 
 
\t \t <script src="main.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="btnMenu" class="borderRadius" style="top: 10px; left: 10px;" onClick="btnMenuClicked(this)"> 
 
\t \t \t <div id="bar1" class="bar"></div> 
 
\t \t \t <div id="bar2" class="bar"></div> 
 
\t \t \t <div id="bar3" class="bar"></div> 
 
\t \t </div> 
 
\t \t <div id="menu" class="borderRadius" style="width: 0px; height: 0px;"> 
 
\t \t \t <div id="containerLnkMenu"> 
 
\t \t \t \t <a id="lnkNews" class="centerTxt lnkMenu" href="">NEWS</a> 
 
\t \t \t \t <a id="lnkFiles" class="centerTxt lnkMenu" href="">FILES</a> 
 
\t \t \t \t <a id="lnkTree" class="centerTxt lnkMenu" href="">TREE</a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
\t <script> 
 
\t \t function btnMenuClicked(e) { 
 
\t \t \t animateBtnMenu(e); 
 
\t \t \t var menu = document.getElementById('menu'); 
 
\t \t \t var menuStyle = window.getComputedStyle(menu, null); 
 
\t \t \t if (menuStyle.width == '0px' && menuStyle.height == '0px') { 
 
\t \t \t \t openMenu(menu, menuStyle, e); 
 
\t \t \t \t centerElementYParent(document.getElementById('containerLnkMenu'), document.getElementById('menu')); 
 
\t \t \t } else { 
 
\t \t \t \t closeMenu(menu, menuStyle, e); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t } 
 
\t \t 
 
\t </script> 
 
</html>

body { 
    margin: 0; 
    font-family: Arial; 
    font-size: 16px; 
} 

a { 
    display: block; 
    text-decoration: none; 
    cursor: pointer; 
} 

/* Class Tools */ 
.centerTxt { text-align: center; } 

.borderRadius { border-radius: 5px; } 

.bar { 
    height: 5px; 
    transition: 0.4s; 
    background-color: #2E0A91; 
} 

.lnkMenu { 
    padding: 5px; 
    color: #FFD500; 
    font-size: 1.5em; 
} 

/*--- navigation ---*/ 
#btnMenu { 
    position: fixed; 
    width: 25px; 
    padding: 5px; 
    transition: 0.8s; 
    cursor: pointer; 
} 

#btnMenu:hover { background-color: #2E0A91; } 

#btnMenu:hover .bar { background-color: #D4B100; } 

#bar2 { margin: 5px 0 5px 0; } 

.change #bar1 { 
    transform: rotate(-45deg) translate(-10px, 4px); 
    width: 141%; 
} 

.change #bar2 { opacity: 0; } 

.change #bar3 { 
    transform: rotate(45deg) translate(-10px, -4px); 
    width: 141%; 
} 

#menu { 
    position: fixed; 
    z-index: 100; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    transition: 0.8s; 
    background-color: #2E0A91; 
}

//NAME:   centerElementYParent 
//DESCRITPTION: e = element to center, f = parent element 
//    Adds margin top to e in order to vertically center element within parent (f) 
function centerElementYParent(e, f) { 
    var eStyle = window.getComputedStyle(e, null); 
    var fStyle = window.getComputedStyle(f, null); 
    console.log(fStyle.height); 
    var eHeight = parseInt(eStyle.height.slice(0, eStyle.height.length - 2)); 
    var fHeight = parseInt(fStyle.height.slice(0, fStyle.height.length - 2)); 
    var marginTop = ((fHeight - eHeight)/2) + 'px'; 
    e.style.marginTop = marginTop; 
} 

//NAME:   animateBtnMenu 
//DESCRIPTION: Attaches the 'change' class to the btnMenu element. 
function animateBtnMenu(e) { 
    e.classList.toggle('change'); 
} 

//NAME:   openMenu 
//DESCRIPTION: Applies a width and height to the menu whilst moving the menu button respectivley 
function openMenu(e, eStyle, f) { 
    e.style.height = '250px'; 
    e.style.width = '300px'; 
    var eStyle = window.getComputedStyle(e, null); 
    f.style.left = '310px'; 
    f.style.top = '260px'; 
} 

//NAME:   closeMenu 
//DESCRIPTION: Sets width and height of the menu to 0 and moves the menu button respectivley 
function closeMenu(e, eStyle, f) { 
    e.style.width = '0px'; 
    e.style.height = '0px'; 
    f.style.top = '10px'; 
    f.style.left = '10px'; 
}

出典

2016-07-14 marmitegeek

あなたがセンターにしたい要素がまだ正しい位置に描画されなかったので、それであってもよいです。 setTimeoutを追加して関数を呼び出してみてください。

openMenu(menu, menuStyle, e); 
setTimeout(function() { 
     centerElementYParent(document.getElementById('containerLnkMenu'), document.getElementById('menu')); 
}, 800);

出典

2016-07-14 15:16:42 Noldor

ありがとうございます。私はできるだけ早くそれを与えるでしょう。関数が呼び出される前に要素が正しくレンダリングされなかった理由を説明できますか？ – marmitegeek

@marmitegeek私はあなたのCSSでトランジションを使用して以来、私はちょうど仮定をしています。アニメーション効果のために、あなたは "openMenu"関数を呼び出した直後にフルサイズではないかもしれません。 – Noldor

私はその前提に同意します。それは私には意味がある。私はこれを答えとしてマークしますが、私はこの要素のマージンをハードコーディングするかもしれないと思っています。私は心配しない - 私はいくつかのことを混乱させ、私が一番好きなものを見ます。助けてくれてありがとう。 – marmitegeek

JS関数が実行中かデバッグ中かに応じて異なる値が渡される

答えて

関連する問題