Web-Frontend
js-Tutorial
Ein Beispiel für die Positionierung von JavaScript-Bedienelementen element_javascript-Fähigkeiten
Ein Beispiel für die Positionierung von JavaScript-Bedienelementen element_javascript-Fähigkeiten
May 16, 2016 pm 04:32 PMEs ist eine gute Wahl, js zum Bedienen und Positionieren von Elementen zu verwenden. Unten finden Sie ein Beispiel
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-操作元素定位元素</title>
<style>
div#a{
width:500px;
}
div{
border:1px solid #000;
padding:10px;
}
#cursor{
position:absolute;
background-color:#ff0;
width:20px;
height:20px;
left:50px;
top:300px;
}
</style>
<script>
function positionObject(obj){
var rect = obj.getBoundingClientRect();
return [rect.left,rect.top];
}
window.onload = function(){
var tst = document.documentElement.getBoundingClientRect();
alert(tst.top);
var cont = 'A';
var cursor = document.getElementById("cursor");
while(cont){
cont = prompt("where do you want to move the cursor block?","A");
if(cont){
cont = cont.toLowerCase();
if(cont == "a"||cont=="b"||cont=="c"){
var elem = document.getElementById(cont);
var pos = positionObject(elem);
console.log(pos);
cursor.setAttribute("style","top:"+pos[1]+"px;"+"left:"+pos[0]+"px");
}
}
}
}
</script>
</head>
<body>
<div id = "a">
<p>A</p>
<div id ="b">
<p>B</p>
<div id="c">
<p>C</p>
</div>
</div>
</div>
<div id="cursor">
</div>
</body>
</html>
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So finden Sie kabellose Apple-Kopfhörer, wenn sie verloren gehen_So finden Sie kabellose Apple-Kopfhörer
Mar 23, 2024 am 08:21 AM
So finden Sie kabellose Apple-Kopfhörer, wenn sie verloren gehen_So finden Sie kabellose Apple-Kopfhörer
So verwenden Sie das WordPress-Plugin, um eine sofortige Positionierungsfunktion zu erreichen
Sep 05, 2023 pm 04:51 PM
So verwenden Sie das WordPress-Plugin, um eine sofortige Positionierungsfunktion zu erreichen
Wie finde ich schnell den Standort eines Huawei-Telefons, nachdem es verloren gegangen ist?
Mar 24, 2024 am 08:48 AM
Wie finde ich schnell den Standort eines Huawei-Telefons, nachdem es verloren gegangen ist?
So ermitteln Sie den Standort des Mobiltelefons der anderen Partei auf Amap - So ermitteln Sie den Standort des Mobiltelefons der anderen Partei auf Amap
Apr 01, 2024 pm 02:11 PM
So ermitteln Sie den Standort des Mobiltelefons der anderen Partei auf Amap - So ermitteln Sie den Standort des Mobiltelefons der anderen Partei auf Amap
So verwenden Sie Karten- und Standortfunktionen in Uniapp
Oct 16, 2023 am 08:01 AM
So verwenden Sie Karten- und Standortfunktionen in Uniapp
Methoden zur Lösung des Problems der Speicherleckstelle bei der Go-Sprachentwicklung
Jul 01, 2023 pm 12:33 PM
Methoden zur Lösung des Problems der Speicherleckstelle bei der Go-Sprachentwicklung
Einführung in das Löschen einer Inhaltsseite in Word
Mar 26, 2024 am 10:06 AM
Einführung in das Löschen einer Inhaltsseite in Word
So ändern Sie die Standortinformationen und die Adresse
Mar 12, 2024 pm 09:52 PM
So ändern Sie die Standortinformationen und die Adresse
