Question

问题：带有id＆＃34; containerLnkMenu＆＃34;的元素传入js函数＆＃34; centerElementYParent＆＃34;时，它在父div中没有正确居中除非我使用谷歌浏览器的调试器在函数中设置了断点＆＃34; getComputedStyle（f，null）＆＃34;呼叫返回＆＃34; 0px＆＃34;如果正常执行高度，我最终会得到一个＆＃39; -57px＆＃39;为保证金最高。

意见：所以我发现一些人在互联网上遇到类似的问题，但我找不到根据自己的需要制定解决方案的方法。
任何有关这方面的帮助将不胜感激如果您需要我进一步解释，请告诉我我希望得到一个详细的回复或链接到进一步阅读，这与我的问题有关（所以我可以从这个错误中学习），但欢迎任何相关/有用的评论。

＆＃13;

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

＆＃13;

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

Answer 1

这可能是因为您要居中的元素尚未呈现在正确位置。尝试添加setTimeout来调用该函数。

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

根据我是执行还是调试，JS函数传递不同的值

1 个答案: