recherche

Maison >interface Web >js tutoriel >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.

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
WBOYoriginal
2016-05-16 15:39:431369parcourir

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>

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js image menu de navigation à porte roulante effets spéciaux code Sharing_Javascript compétencesArticle suivant：js image menu de navigation à porte roulante effets spéciaux code Sharing_Javascript compétences

Articles Liés

Voir plus