ホームページ >ウェブフロントエンド >jsチュートリアル >純粋な JS コードにより、幅と高さが不明な要素を、指定された element_javascript スキルで垂直方向、水平方向、中央に表示できるようになります。
純粋な JS コードにより、幅と高さが不明な要素を、指定された element_javascript スキルで垂直方向、水平方向、中央に表示できるようになります。
- WBOYオリジナル
- 2016-05-16 15:39:431367ブラウズ
以下では、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>
1. 実装原則:
今日は以上がこの記事の内容です。scrollTop、offsetHeight、offsetTop などの属性の使用方法については、今後も更新していきます。よろしくお願いします。あなた。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。