it-swarm.com.de

Zugewiesene Breite in Prozent, die jedoch in Pixel angegeben werden soll

.test {
  border: 1px solid;
  cursor: pointer;
  height: 10px;
  position: relative;
  width: 100%;
}
<div id="test1" class="test"></div>

Ich habe mein HTML id und sein CSS angezeigt. Wenn ich jetzt $('#test').width() mache, erhalte ich 100. Ich möchte sein width in Pixeln (nicht in %).

Kann jemand sagen, wie man seine Breite in Pixeln erhält?

51
Denzz

.width() ruft "... die aktuell berechnete Breite" des Elements ab, für das gemäß der jQuery-Breitendokumentation Folgendes verwendet wird: http://api.jquery.com/width/ Daher ist der Rückgabewert von $('#heatMapBar').width() in Pixel und nicht in Prozent. Ich würde vorschlagen, Entwickler-Tool zu verwenden, um die Breite zu überprüfen, es kann sein, dass in #heatMapBar 's aktueller Kontext, seine Breite beträgt 100px.

Wenn Sie hier schauen: http://jsfiddle.net/NkQXa/1/ Sie werden sehen, dass #test ist eingestellt auf width:50%;, aber es warnt die tatsächliche Pixelbreite.

25
jezza-tan

Eine der Optionen kann auch sein, dass das übergeordnete Element nicht sichtbar ist. Hier ist ein Beispiel: http://jsfiddle.net/nDMM3/

Sie können sehen, dass jQuery return width = 100 (wie 100%)

.test {
    border: 1px solid;
    cursor: pointer;
    height: 10px;
    position: relative;
    width: 100%;
    display:none;
}

#test2{
   width:100%;
}

<div id="test1" class="test">
   <div id="test2">
      Hello
   </div>    
 </div>   

 alert($('#test2').width());
39
Honzík

Es kann ein Problem mit mehreren Divs mit prozentualer Breite geben:

<div style="width: 50%">
<div id="getMyWidth" style="width: 100%"></div>
</div>

In diesem Fall wird 100 als Breite für das innere Div für mich zurückgegeben. Ich habe es gelöst, indem ich die Breite des äußeren Div genommen habe.

5
Axel Schmitz

Basierend auf der Antwort von Honzik ist dies eine kleine Problemumgehung für den Fall, dass sich das Element, das zur Angabe seiner Breite benötigt wird, in einem versteckten übergeordneten Element befindet .

function getWidth(elemID) {
    // get parent element unique id (must have)
    var parentId = $("#"+elemID).parent().prop("id"); 
    // remove the child element based on the specified element id
    $("#"+elemID).remove();
    // append a new child element but on body where most probably is not set to "display:none"
    $("body").append('<div id="'+elemID+'">Hello</div>');
    // get the width of the newly appended child element and store it to a variable
    var width = $("#test2").width();
    // remove child element from body
    $("#"+elemID).remove();
    // re-append child element to its former position under former parent element (having CSS attribute "display:none")
    $(parentId).append('<div id="'+elemID+'">Hello</div>');
    // display stored element width 
    alert(width);
}
// usage to get the element's width
getWidth("test2");

Probieren Sie es im folgenden Ausschnitt aus!

function getWidth(elemID) {
        var parentId = $("#"+elemID).parent().prop("id"); // your parent element should have a unique id specified
        $("#"+elemID).remove();
        $("body").append('<div id="'+elemID+'">Hello</div>');
        var width = $("#test2").width();
        $("#"+elemID).remove();
        $(parentId).append('<div id="'+elemID+'">Hello</div>');
        alert(width);
    }
getWidth("test2");
.test {
    border: 1px solid;
    cursor: pointer;
    height: 10px;
    position: relative;
    width: 100%;
    display:none;
}

#test2{
   width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1" class="test">
   <div id="test2">
      Hello
   </div>    
 </div>
3
Peter Darmis

Bitte überprüfen Sie den unten angehängten Code. Ich hoffe, dass dies der einfachste Weg ist, die Breite von Prozent zu Pixel zu ermitteln.

HTML

<div id="test1" class="test">
 <p id="widthPx"> Perentage to Pixel : </p>
</div>

CSS

 .test {
  border: 1px solid;
  cursor: pointer;
  height: 100%;
  position: relative;
  width: 100%;
  padding: 10px;
}

JS

var widPx = $('#test1').width();
$('#widthPx').append(Math.round(widPx) + 'px');

AUSGABE

Prozentsatz zu Pixel: 609px

Die Ausgabe würde lediglich auf der div-Breite basieren.

Vielen Dank.

2
KickyTrick

Nur eine Idee ... hasse nicht . Ich weiß, dass es nicht alle Eventualitäten abdeckt, aber so etwas wie dieses könnte jedes der übergeordneten Elemente auf die gewünschten CSS-Regeln überprüfen (Anzeige: keines; in diesem Fall). Ich habe die Idee von hier .

Das einzige Problem ist, wenn eine Site komplizierter wird ... sie wird langsam.

Aber es ist ein springender Punkt.

//showing as 100%
alert($('#test2').width());
//use window.load to ensure .width() isnt doing anything funny
$(window).load(function(){
//checks to see if any of its parents have display:none; we can have multiple checks here if required
    if ($( "#test2" ).parents().css('display') == 'none') {
//iterate through each parent of the selected item  
        $( "#test2" ).parents().each(function () {
//only change the display value if the element has a display:none;
            if ($(this).css('display') == 'none') {
                $(this).css('display', 'block');
                alert($('#test2').width());//or whatever we want to do with this number
//reset values here       
                $(this).css('display', 'none');
           }
        });
    }
//showing as 100%
    alert($('#test2').width());
});
2
Matthew Brent

Ich bin mir nicht sicher, aber $("#id/.class").width() gibt in meinem Fall den Wert in Pixel an.

screen-shot of jQuery code

Im obigen Screenshot finden Sie unterschiedliche Werte für $("#id/.class").width() in Pixel bei unterschiedlicher Bildschirmgröße des Browsers.

Nun, ich benutze Firefox für diesen Zweck.

Sie können auch die jQuery-Dokumentation zu diesem Thema überprüfen.

2
Pankaj Gautam

Das kann ein Zufall sein. Laut der offiziellen Dokumentation auf api.jqery.com heißt es, dass

Ruft die aktuell berechnete Breite für das erste Element in der Menge der übereinstimmenden Elemente ab.

Um zu bestätigen, dass Sie die Breite in Pixel erhalten, können Sie diesen Wert der .css (width) -Methode von jQuery zuordnen. Sie gibt die Breite in Pixel zurück und Sie können daher bestätigen, dass die Rückgabehöhe in Pixel angegeben ist.

2
Dhruv Ramdev

Eine andere Lösung ohne JQuery ist die Verwendung der Eigenschaft clientWidth, die für HTMLElements verfügbar ist

document.getElementById('test1').clientWidth
2
Kalle

Es könnte ein Fehler in früheren jQuery-Versionen bis zu diesem Github-PR gewesen sein: https://github.com/jquery/jquery/pull/3741

Obwohl es jetzt 2019 ist, musste ich jQuery 1.12.4 verwenden und bemerkte, dass die Breitenberechnung eines ausgeblendeten (vom übergeordneten Element ausgeblendeten) Elements immer 100 betrug.

Beim Debuggen habe ich festgestellt, dass die Funktion jQuery outerWidth (ähnlich für innerHeight, innerWidth, height, width, outerHeight und outerWidth) die width cssHook aufruft, die wiederum getWidthOrHeight () aufruft. getWidthOrHeight () kann eine Breite in% erhalten, die dann so wie sie ist zurückgegeben wird. Die width -Funktion überprüft nicht, was zurückgegeben wurde, und leitet es durch parseFloat, was dazu führt, dass 100% nur 100 werden.

0
SP193