Angenommen, die Regel lautet wie folgt:

.largeField {
    width: 65%;
}

Gibt es eine Möglichkeit, '65% 'irgendwie zurückzubekommen und nicht den Pixelwert?

Vielen Dank.

BEARBEITEN: Leider ist die Verwendung von DOM-Methoden in meinem Fall unzuverlässig, da ich ein Stylesheet habe, das andere Stylesheets importiert, und der Parameter cssRules daher entweder den Wert null oder einen undefinierten Wert hat.

Dieser Ansatz würde jedoch in den einfachsten Fällen funktionieren (ein Stylesheet, mehrere separate Stylesheet-Deklarationen innerhalb des Head- Tags des Dokuments).

Ich fürchte, es gibt keinen eingebauten Weg. Sie können so etwas tun:

var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

Einfachster Weg

$('.largeField')[0].style.width

// >>> "65%"

Das ist definitiv möglich!

Sie müssen zuerst das übergeordnete Element ausblenden (). Dadurch wird verhindert, dass JavaScript Pixel für das untergeordnete Element berechnet.

$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);

Siehe mein Beispiel .

Nun ... ich frage mich, ob ich diesen Hack als Erster entdecke :)

Aktualisieren:

Einzeiler

element.clone().appendTo('body').wrap('<div style="display: none"></div>').css('width');

Es hinterlässt ein verstecktes Element vor dem </body>Tag, das Sie möglicherweise möchten .remove().

Sehen Sie sich ein Beispiel für einen Einzeiler an .

Ich bin offen für bessere Ideen!

Sie können auf das document.styleSheetsObjekt zugreifen :

<style type="text/css">
    .largeField {
        width: 65%;
    }
</style>
<script type="text/javascript">
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i=0; i < rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == ".largefield") {
            alert(rule.style.getPropertyValue("width"));
        }
    }
</script>

Verspätet, aber für neuere Benutzer, versuchen Sie dies, wenn der CSS-Stil einen Prozentsatz enthält :

$element.prop('style')['width'];

Ein jQuery-Plugin basierend auf Adams Antwort:

(function ($) {

    $.fn.getWidthInPercent = function () {
        var width = parseFloat($(this).css('width'))/parseFloat($(this).parent().css('width'));
        return Math.round(100*width)+'%';
    };

})(jQuery);

$('body').html($('.largeField').getWidthInPercent());​​​​​

Gibt '65% 'zurück. Gibt nur gerundete Zahlen zurück, um besser zu funktionieren, wenn Sie möchten, wenn (width == '65%'). Wenn Sie Adams Antwort direkt verwendet hätten, hätte das nicht funktioniert (ich habe so etwas wie 64.93288590604027). :) :)

Aufbauend auf der hervorragenden und überraschenden Lösung von timofey finden Sie hier eine reine Javascript-Implementierung:

function cssDimensions(element)
  var cn = element.cloneNode();
  var div = document.createElement('div');
  div.appendChild(cn);
  div.style.display = 'none';
  document.body.appendChild(div);
  var cs = window.getComputedStyle
    ? getComputedStyle(cn, null)
    : cn.currentStyle;
  var ret = { width: cs.width, height: cs.height };
  document.body.removeChild(div);
  return ret;
}

Hoffe, es ist hilfreich für jemanden.

Ich habe ein ähnliches Problem beim Abrufen der Werte des globalen Stylesheets in jQuery . Schließlich habe ich die gleiche Lösung wie oben gefunden .

Ich wollte nur die beiden Fragen miteinander verknüpfen, damit andere von späteren Erkenntnissen profitieren können.

Sie können Stile, auf die Sie mit jQuery zugreifen müssen, wie folgt einfügen:

1. der Kopf des Dokuments direkt
2. in einem Include, welches serverseitige Skript dann in den Kopf setzt

Dann sollte es möglich (wenn auch nicht unbedingt einfach) sein, eine js-Funktion zu schreiben, um alles innerhalb der Stil-Tags im Dokumentkopf zu analysieren und den gewünschten Wert zurückzugeben.

Mit der Funktion css (width) können Sie die aktuelle Breite des Elements zurückgeben.

dh.

var myWidth = $("#myElement").css("width");

Siehe auch: http://api.jquery.com/width/ http://api.jquery.com/css/

In jQuery gibt es nichts und auch in Javascript nichts Unkompliziertes. Ausgehend von der Antwort von timofey habe ich diese Funktion erstellt, mit der Sie alle gewünschten Eigenschaften abrufen können:

// gets the style property as rendered via any means (style sheets, inline, etc) but does *not* compute values
// domNode - the node to get properties for 
// properties - Can be a single property to fetch or an array of properties to fetch
function getFinalStyle(domNode, properties) {
    if(!(properties instanceof Array)) properties = [properties]

    var parent = domNode.parentNode
    if(parent) {
        var originalDisplay = parent.style.display
        parent.style.display = 'none'
    }
    var computedStyles = getComputedStyle(domNode)

    var result = {}
    properties.forEach(function(prop) {
        result[prop] = computedStyles[prop]
    })

    if(parent) {
        parent.style.display = originalDisplay
    }

    return result
}

Konvertieren Sie mithilfe der Kreuzmultiplikation von Pixel in Prozent .

Formel-Setup:

1.) (element_width_pixels / parent_width_pixels) = (element_width_percentage / 100)

2.) element_width_percentage = (100 * element_width_pixels) / parent_width_pixels

Der eigentliche Code:

<script>

   var $width_percentage = (100 * $("#child").width()) / $("#parent").width();

</script>