Breite in Pixel vom Element mit dem mit% festgelegten Stil abrufen?

73

Ich habe dieses Element:

<div style="width: 100%; height: 10px;"></div>

Ich möchte die Breite in Pixel erhalten. Ich habe es gerade versucht:

document.getElementById('banner-contenedor').style.width

Welches kehrt zurück 100%. Ist es möglich, die Breite des Elements in Pixel mit JavaScript zu ermitteln?

javascript html css

— lisovaccaro
quelle

Sie müssen computedstyle oder jquery verwenden

— PitaJ

2

Es ist einfach stackoverflow.com/a/294273/6521116

— LF00

92

document.getElementById('banner-contenedor').clientWidth

— xdazz
quelle

2

Derzeit nicht Standard. Es funktioniert jedoch in den meisten Browsern und ist im Entwurf des CSSOM View Module enthalten .

— RobG

Was kann getan werden, wenn clientWidth und offsetWidth beide 0 zurückgeben?

— Siva Bathula

15

Sie möchten die berechnete Breite erhalten. Versuchen:.offsetWidth

(Dh: this.offsetWidth='50px'odervar w=this.offsetWidth )

Diese Antwort könnte Ihnen auch auf SO gefallen .

— GitaarLAB
quelle

5

Keine einzige Antwort macht das, was in Vanilla JS gefragt wurde, und ich möchte eine Vanille-Antwort, also habe ich es selbst gemacht.

clientWidth enthält Polsterung und offsetWidth enthält alles andere ( jsfiddle link ). Was Sie wollen, ist, den berechneten Stil zu erhalten ( jsfiddle Link ).

function getInnerWidth(elem) {
    return parseFloat(window.getComputedStyle(elem).width);
}

BEARBEITEN: getComputedStyleist nicht Standard und kann Werte in anderen Einheiten als Pixel zurückgeben. Einige Browser geben auch einen Wert zurück, der die Bildlaufleiste berücksichtigt, wenn das Element einen hat (was wiederum einen anderen Wert als die in CSS festgelegte Breite ergibt). Wenn das Element über eine Bildlaufleiste verfügt, müssen Sie die Breite manuell berechnen, indem Sie die Ränder und Auffüllungen aus dem entfernen offsetWidth.

function getInnerWidth(elem) {
    var style = window.getComputedStyle(elem);
    return elem.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeft) - parseFloat(style.borderRight) - parseFloat(style.marginLeft) - parseFloat(style.marginRight);
}

Trotz alledem ist dies wahrscheinlich keine Antwort, die ich mit meiner aktuellen Erfahrung empfehlen würde, und ich würde auf Methoden zurückgreifen, die nicht so sehr auf JavaScript basieren.

— Domino
quelle

Dies funktioniert nicht / hat Probleme, wenn Breite CSS ist 100%;

— Towry

@towry Möchten Sie erklären, wo das Problem liegt, damit ich meine Antwort bei Bedarf korrigieren kann? Ich habe das vor fünf Jahren geschrieben.

— Domino

Ich hatte gerade das Problem vor Tagen. Angenommen, das anfängliche CSS lautet width: 100%: Dann verwende ich getComputedStyle, um die Breite in Pixel zu ermitteln, aber es wird immer ein leerer Wert zurückgegeben, aber bei einem Timeout-Rückruf kann ein korrekter Pixelnummernwert abgerufen werden.

— Towry

3

Sie können verwenden offsetWidth. Weitere Informationen finden Sie in diesem Beitrag und in dieser Frage .

console.log("width:" + document.getElementsByTagName("div")[0].offsetWidth + "px");

div {border: 1px solid #F00;}

<div style="width: 100%; height: 10px;"></div>

Erweitern Sie das Snippet

— LF00
quelle

-1

Versuchen Sie es mit jQuery:

$("#banner-contenedor").width();

— Ruben
quelle

1

Dies gibt die Breite in% nur ohne das% -Zeichen zurück.

— Dorado

-1

Diese jQuery hat bei mir funktioniert:

$("#banner-contenedor").css('width');

Dadurch erhalten Sie die berechnete Breite

http://api.jquery.com/css/

— Kennzeichen
quelle

Dies gibt die% nicht den px-Wert

— eyal_katz

-4

yourItem.style['cssProperty']

Auf diese Weise können Sie die Eigenschaftszeichenfolge dynamisch aufrufen

— ffdigital
quelle