jquery erhalten Breite von div zu linken Seitenfenster

Question

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.

Answer 1

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()

Answer 2

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; 

Answer 3

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.)

Answer 4

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; 

JSFiddle

Answer 5

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.