純粋な JS コードにより、幅と高さが不明な要素を、指定された element_javascript スキルで垂直方向、水平方向、中央に表示できるようになります。-jsチュートリアル-php.cn

純粋な JS コードにより、幅と高さが不明な要素を、指定された element_javascript スキルで垂直方向、水平方向、中央に表示できるようになります。

WBOY

リリース： 2016-05-16 15:39:43

オリジナル

1366 人が閲覧しました

以下では、span 要素を例として使用して、div 内の spa 要素の水平方向および垂直方向のセンタリング効果を 実現する方法を紹介します。コードは次のとおりです。

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

ログイン後にコピー

上記のコードは、span 要素を div 内で垂直方向と水平方向の中央に配置する効果を実現します。その実装プロセスを簡単に紹介します。

1. 実装原則:

CSS は、span 要素のサイズを明示的に指定しませんが、結局のところ、このサイズは offsetWidth 属性と offsetHeight 属性を使用して取得でき、span 要素を絶対配置に設定してから、 left と top の属性値をそれぞれ 50% に設定します。ただし、今回は、span 要素の中心点が垂直方向と水平方向の中心に配置されるのではなく、span 要素の左上隅が垂直方向と水平方向の中心に配置されます。スパン要素の負のマージンが設定され、サイズはスパン要素の幅と高さの半分になり、垂直方向と水平方向のセンタリング効果が得られます。

今日は以上がこの記事の内容です。scrollTop、offsetHeight、offsetTop などの属性の使用方法については、今後も更新していきます。よろしくお願いします。あなた。