Reiner JS-Code ermöglicht die vertikale, horizontale und zentrierte Anzeige von Elementen mit unbekannter Breite und Höhe in den angegebenen element_javascript-Fähigkeiten-js-Tutorial-php.cn

Reiner JS-Code ermöglicht die vertikale, horizontale und zentrierte Anzeige von Elementen mit unbekannter Breite und Höhe in den angegebenen element_javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:39:43

Original

1367 Leute haben es durchsucht

Im Folgenden wird das span-Element als Beispiel verwendet, um vorzustellen, wie der horizontale und vertikale Zentrierungseffekt des span-Elements im div realisiert wird. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Ihr Code oben erzielt den Effekt, dass das Span-Element im Div vertikal und horizontal zentriert wird. Hier finden Sie eine kurze Einführung in den Implementierungsprozess.

1. Umsetzungsprinzip:

Obwohl CSS die Größe des Span-Elements nicht explizit angibt, verfügt es doch über eine Größe. Diese Größe kann mithilfe der Attribute offsetWidth und offsetHeight ermittelt werden. Anschließend wird das Span-Element auf die absolute Positionierung festgelegt und dann festgelegt Legen Sie die Attributwerte „links“ und „oben“ jeweils auf 50 % fest, aber dieses Mal ist es nicht der Mittelpunkt des Span-Elements, der vertikal und horizontal zentriert ist, sondern die obere linke Ecke des Span-Elements, die vertikal und horizontal zentriert ist Der negative Rand des Spannenelements wird festgelegt und die Größe beträgt die Hälfte der Breite und Höhe des Spannenelements, wodurch der vertikale und horizontale Zentrierungseffekt erzielt wird.

Das ist der gesamte Inhalt dieses Artikels. Ich werde Sie in Zukunft mit Details zur Verwendung von Attributen wie scrollTop, offsetHeight und offsetTop versorgen Du.