Le code JS pur permet d'afficher des éléments de largeur et de hauteur inconnues verticalement, horizontalement et centrés dans les compétences element_javascript spécifiées.-js tutoriel-php.cn

Le code JS pur permet d'afficher des éléments de largeur et de hauteur inconnues verticalement, horizontalement et centrés dans les compétences element_javascript spécifiées.

WBOY

Libérer： 2016-05-16 15:39:43

original

1340 Les gens l'ont consulté

Ce qui suit utilise l'élément span comme exemple pour présenter comment réaliser l'effet de centrage horizontal et vertical de l'élément span dans le div Le code est le suivant :

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

Copier après la connexion

Votre code ci-dessus obtient l'effet de centrer verticalement et horizontalement l'élément span dans le div. Voici une brève introduction à son processus de mise en œuvre.

1.Principe de mise en œuvre :

Bien que CSS ne donne pas explicitement la taille de l'élément span, il a après tout une taille. Cette taille peut être obtenue en utilisant les attributs offsetWidth et offsetHeight, puis définissez l'élément span sur un positionnement absolu, puis définissez le. valeurs d'attribut left et top. Définissez-les respectivement sur 50 %, mais cette fois, ce n'est pas le point central de l'élément span qui est centré verticalement et horizontalement, mais le coin supérieur gauche de l'élément span qui est centré verticalement et horizontalement. la marge négative de l'élément de travée est définie et la taille est la moitié de la largeur et de la hauteur de l'élément de travée, obtenant ainsi l'effet de centrage vertical et horizontal.

Ce qui précède représente l'intégralité du contenu de cet article. C'est tout pour aujourd'hui. Je vous mettrai à jour avec des détails sur l'utilisation d'attributs tels que scrollTop, offsetHeight et offsetTop à l'avenir. Veuillez continuer à prêter attention à ce site, merci. toi.