Und ich möchte die Breite oder Entfernung oder Pixel, die zwischen der div
und der linken Seite des Fensters/Viewport. Und wieder eine andere Breite zwischen dem div
auf der rechten Seite des Fensters. Ich werde die Breite verwenden, um eine linke und rechte Linie zu erstellen. Aber ich bin arm in jQuery, versuche ich offset
aber scheint nichts passieren. Also bin ich wieder bei 0, also habe ich hier keine Geige mitgenommen, da ich nichts reinbekomme. Aber ich habe mit dem Bildlink unten angehängt, um meine Frage zu erläutern. Bitte helfen Sie mir bei dem Versuch, die Breite zu bekommen, ich kann die Linie selbst erstellen. Danke.jquery erhalten Breite von div zu linken Seitenfenster
Antwort
var of = $(ele).offset(), // this will return the left and top
left = of.left, // this will return left
right = $(window).width() - left - $(ele).width() // you can get right by calculate
Vielleicht können diese Ihnen helfen. Schließlich ist .width()
nicht die einzige Antwort, wie innerWidth()
oder outerWidth()
Ich benutze dies: D und es ist Arbeit ... – demoncoder
vielen Dank – demoncoder
@demoncoder machen es die akzeptierte Antwort dann –
Es gibt zwei Möglichkeiten One ist man rote Linie als Bild verwenden können, und Sie können die div über die rote Linie platzieren. Zweite, Wenn Sie berechnen möchten:
Links Div Breite = Eltern Div Breite - Child Div Offset;
Rechte div width = übergeordnete div width - untergeordneter div offset + untergeordneter div width;
var parentdiv = document.getElementById("ParentDivID");
var parentWidth = parentdiv.offsetWidth;
var childdiv = document.getElementById("childDivID");
var childWidth = childdiv.offsetLeft;
Dies ist einfacher, mit POJ (plain old Javascript) zu tun. Holen Sie sich die Position des Elements auf dem Bildschirm. Dann bewerten Sie die left
Eigenschaft. Das ist die Breite deiner linken Linie. Dann subtrahieren Sie die Eigenschaft right
von der Breite des Bildschirms. Das ist die Breite deiner rechten Linie.
var x = document.getElementById('myDiv').getBoundingClientRect();
var myLeftLineWidth = x.left;
var myRightLineWidth = screen.width - x.right;
Weitere Informationen finden Sie unter this post. Wenn Sie die Breite des Fensters anstelle des Bildschirms wünschen, ändern Sie screen.width
in window.innerWidth
. Wenn die Bildlaufleiste usw. nicht in die Breite einbezogen werden soll, verwenden Sie document.documentElement.clientWidth
. (Für weitere Informationen über diese finden this.)
Sie können das tun mit JavaScript, keine Notwendigkeit für jQuery:
var mydiv = document.getElementById('mydiv');
var offset = mydiv.getBoundingClientRect();
var offsetRight = document.documentElement.clientWidth - offset.right;
var offsetLeft = offset.left;
Deine Geige hält nicht, wenn du das div nicht horizontal zentrierst; beide zurückgegebenen Werte sind gleich, egal was Sie für den linken Rand gesetzt haben. Wenn Sie 'offsetRight' in =' document.documentElement.cientWidth - offset.right' ändern, funktioniert es. – BobRodes
Scheint so. Vielen Dank. – Zentryn
Ich würde wahrscheinlich so etwas tun wie window.innerWidth - (offset.left + mydiv.clientWidth); –
Wir arbeiten können, dass dort, wo die Box mit .offset()
beginnt . Als nächstes können wir herausfinden, wo die Box mit .offset() + .width()
endet. Wir wissen jetzt, wo unsere Box auf der X-Achse sitzt.
Jetzt mal sehen, was wir auf der linken Seite unserer Box mit .left
haben, die auf unserer .offset()
laufen kann. Wir haben jetzt herausgefunden, wie viel Platz links und wie breit unsere Box ist.
Schließlich können wir setzen, was wir zusammen erarbeitet haben, können wir die Seitenbreite $(window).width()
und minus, was es links von unserer Box (Stufe 2) und die Breite unserer Box (Stufe 1) und das wird nur verlassen, was rechts von unserer Box ist.
Das ist die Theorie sowieso jetzt schauen wir uns einen Code an. Du wirst sehen, dass ich alle Teile der Theorie ausarbeite und dann eine visuelle Darstellung hinzufüge.
calcSizes = function() {
var boxPos = $(".box").offset(),
toLeft = boxPos.left,
toRight = $(window).width() - ($(".box").width() + toLeft);
$(".left").width(toLeft + "px");
$(".right").width(toRight + "px");
console.log("Right: " + toRight + "px");
console.log("Left: " + toLeft + "px");
console.log("Width: " + $(".box").width() + "px");
console.log(
$(window).width() + "px = " +
toRight + "px + " +
toLeft + "px + " +
$(".box").width() + "px"
);
console.log(" ");
}
calcSizes();
body {
margin: 0
}
.box,
.indicator {
padding: 10px 0;
text-align: center
}
.box {
width: 100px;
background: #FF5722;
margin-left: 60%
}
.indicator {
background: repeating-linear-gradient(45deg, #F44336, #F44336 10px, #D32F2F 10px, #D32F2F 20px);
overflow: hidden;
transform: translatey(-100%);
opacity: .8
}
.left {
float: left
}
.right {
float: right
}
button {
position: fixed;
top: 55px;
left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">BOX</div>
<div class="left indicator">
LEFT
</div>
<div class="right indicator">
RIGHT
</div>
<button onclick="calcSizes()">
Recalculate
</button>
Hoffnung macht den Sinn und helfen Ihnen, mit Ihrem Projekt.
wow! Details beantworten !! Danke!! – demoncoder
- 1. erhalten div linken und rechten Wert mit jquery
- 2. jquery Trigger horizontale Scroll-Fluid dynamische Breite div, stoppen Ende/beggining, erhalten Breite Fenster
- 3. Feste Breite div auf der linken, füllen verbleibende Breite div auf der rechten Seite
- 4. Reszing div Breite Größe mit jquery
- 5. Hauptmenü mit linken, mittleren und rechten div
- 6. jQuery erhalten HTML-Inhalte von Kind DIV
- 7. Wie man ein Seitenfenster hat
- 8. Div nicht volle Breite aufnehmen?
- 9. div innerhalb div - Breite Problem
- 10. Erhalten Sie die maximale Breite von uinavigationItem.titleView?
- 11. CSS-Layout - Dynamische Breite DIV
- 12. jQuery erhalten Referenz in einem div
- 13. CSS div Breite - nur Inhaltsbreite ..?
- 14. div Breite 100% + 10px: relativ zu Eltern?
- 15. jQuery Top-Offset relativ zu einem bestimmten Div erhalten
- 16. Erhalten eines bestimmten div mit Jquery
- 17. jQuery erhalten Wert innerhalb Kind div
- 18. CSS - Breite automatisch anpassen div
- 19. Absolute div Breite innerhalb relativ div
- 20. Breite der DIV abhängig von der Breite des Fensters
- 21. jQuery - Set div Breite um es zusammenzufassen Kinder
- 22. Ändern der Breite von Property linken Seite Kollektionseditor/Ansicht
- 23. Absolute Positionierung nicht groß mit Breite und linken Werte
- 24. erhalten div Element von jquery und Rückgrat el
- 25. wie für 2 div 100% Breite machen
- 26. Einen scrollbaren Bereich mit fester Breite erhalten
- 27. jQuery Breite() 0 zurück
- 28. jQuery linken und rechten Zuordnung
- 29. jQuery Dynamische Höhe Breite von Modal
- 30. jQuery Breite Funktion 0 auf Text Rückkehr
Bitte zeigen Sie uns einen Code, um zu sehen, was Sie versucht haben. –
Holen Sie sich die Position von links und rechts von diesem div. :) – divy3993
Was hast du bisher probiert? Setzen Sie den Code hier in ein ** Snippet ** oder [JSFiddle] (http://www.jsfiddle.net). – divy3993