Heim >Web-Frontend >js-Tutorial >So drücken Sie die Zentrierung in Javascript aus
So drücken Sie die Zentrierung in Javascript aus
- 藏色散人Original
- 2021-06-30 09:46:074562Durchsuche
So implementieren Sie die JavaScript-Zentrierung: Rufen Sie zuerst das Browserfenster ab, dann berechnen Sie die Position über die Fensterbreite und -höhe und schließlich das div-Element von mcontent.
Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Spezifische Frage:
Wie meinst du, dass JavaScript zentriert ist?
js, um den Div-Inhalt zu zentrieren
var button=document.createElement("input");
button.setAttribute("type","button");
button.setAttribute("id","button1");Um die Schaltfläche innerhalb des Div zu zentrieren, verwenden Sie js, nicht HTML
Implementierungsmethode:
text-align: center;
line-height:100px; /*行间距和div宽度相同*/
}
</style>
<body>
<div id="main">
<div id="content">
Sun
</div>
</div>
<script type="text/javascript">
window.onload = function() {
// 获取浏览器窗口
var windowScreen = document.documentElement;
// 获取main的div元素
var main_div = document.getElementById("main");
// 通过窗口宽高和div宽高计算位置
var main_left = (windowScreen.clientWidth - main_div.clientWidth)/2 + "px";
var main_top = (windowScreen.clientHeight - main_div.clientHeight)/2 + "px";
// 位置赋值
main_div.style.left = main_left;
main_div.style.top = main_top;
// 获取mcontent的div元素
var content_div = document.getElementById("content");
var content_left = (main_div.clientWidth - content_div.clientWidth)/2 + "px";
var content_top = (main_div.clientHeight - content_div.clientHeight)/2 + "px";
content_div.style.left = content_left;
content_div.style.top = content_top;
}
</script>
</body>Erweiterte Informationen
Div-Zentrierungscode oben und unten
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <title>Div上下居中－www.51windows.Net</title> <head> <meta name="keywords" content="51windows.Net"> <meta http-equiv=content-type content="text/html; charset=gb2312"> </head> <body> <div style="position: absolute; top: 200; left: 0; width: 300; height: 200;border: 1 solid #C0C0C0;"> <div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了 center</div> </div> <div style="border: 1 solid #C0C0C0;"> <div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了 center</div> </div> </body> </html>
[Verwandte Empfehlungen : Javascript-Tutorial für Fortgeschrittene】
Das obige ist der detaillierte Inhalt vonSo drücken Sie die Zentrierung in Javascript aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!