순수 js 코드를 사용하면 너비와 높이를 알 수 없는 요소를 지정된 element_javascript 기술에서 수직, 수평 및 중앙에 표시할 수 있습니다.-JS 튜토리얼-php.cn

순수 js 코드를 사용하면 너비와 높이를 알 수 없는 요소를 지정된 element_javascript 기술에서 수직, 수평 및 중앙에 표시할 수 있습니다.

WBOY

풀어 주다： 2016-05-16 15:39:43

원래의

1332명이 탐색했습니다.

다음은 스팬 요소를 예로 들어 div에서 스팬 요소의 수평 및 수직 센터링 효과를 구현하는 방법을 소개합니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>脚本之家</title>
<style type="text/css">
#box{
 width:200px;
 height:150px;
 background:blue;
 position:relative;
}
#antzone{
 background:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var oantzone=document.getElementById("antzone");
 var w=oantzone.offsetWidth;
 var h=oantzone.offsetHeight;
 oantzone.style.position="absolute";
 oantzone.style.left="50%";
 oantzone.style.top="50%";
 
 oantzone.style.marginLeft=-(w/2)+"px";
 oantzone.style.marginTop=-(h/2)+"px";
}
</script>
</head>
<body>
<div id="box">
 <spanj id="antzone">脚本之家</span>
</div>
</body>
</html>

로그인 후 복사

위의 코드는 div의 범위 요소를 수직 및 수평 중앙에 배치하는 효과를 달성합니다. 다음은 구현 프로세스에 대한 간략한 소개입니다.

1. 구현 원칙:

CSS는 스팬 요소의 크기를 명시적으로 제공하지 않지만 결국 크기를 갖습니다. 이 크기는 offsetWidth 및 offsetHeight 속성을 사용하여 얻은 다음 스팬 요소를 절대 위치로 설정한 다음 left 속성값과 top 속성값을 각각 50%로 설정하는데, 이번에는 수직과 수평의 중심이 되는 스팬 요소의 중심점이 아니라, 수직과 수평의 중심이 되는 스팬 요소의 왼쪽 상단이 됩니다. 스팬 요소의 음수 여백이 설정되고 크기는 스팬 요소의 너비와 높이의 절반이므로 수직 및 수평 센터링 효과가 달성됩니다.

이상이 이 글의 전체 내용입니다. 앞으로도 scrollTop, offsetHeight, offsetTop 등의 속성 사용에 대해 자세히 알려드리겠습니다. 감사합니다. 너.