Powiedzmy, że reguła jest następująca:

.largeField {
    width: 65%;
}

Czy istnieje sposób, aby jakoś odzyskać „65%”, a nie wartość piksela?

Dzięki.

EDYCJA: Niestety używanie metod DOM jest zawodne w moim przypadku, ponieważ mam arkusz stylów, który importuje inne arkusze stylów, w wyniku czego parametr cssRules kończy się wartością null lub undefined .

Takie podejście zadziałałoby jednak w najprostszych przypadkach (jeden arkusz stylów, wiele oddzielnych deklaracji arkuszy stylów w tagu head dokumentu).

Obawiam się, że nie ma wbudowanej drogi. Możesz zrobić coś takiego:

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

Najłatwiejszy sposób

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

// >>> "65%"

Jest to jak najbardziej możliwe!

Najpierw musisz ukryć () element nadrzędny. Zapobiegnie to obliczaniu pikseli przez JavaScript dla elementu podrzędnego.

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

Zobacz mój przykład .

Teraz ... zastanawiam się, czy jako pierwszy odkryję ten hack :)

Aktualizacja:

Jednowierszowy

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

Pozostawi ukryty element przed </body>tagiem, co możesz chcieć .remove().

Zobacz przykład jednej linii .

Jestem otwarty na lepsze pomysły!

Dostęp do document.styleSheetsobiektu można było uzyskać :

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

Późno, ale dla nowszych użytkowników, spróbuj tego, jeśli styl css zawiera procent :

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

Wtyczka jQuery oparta na odpowiedzi Adamsa:

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

Zwróci „65%”. Zwraca tylko zaokrąglone liczby, aby działały lepiej, jeśli lubisz if (szerokość == '65%'). Jeśli użyłbyś odpowiedzi Adamsa bezpośrednio, to nie zadziałało (mam coś takiego jak 64.93288590604027). :)

Opierając się na doskonałym i zaskakującym rozwiązaniu timofey, oto implementacja czystego JavaScript:

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;
}

Mam nadzieję, że to komuś pomoże.

Mam podobny problem z pobieraniem wartości globalnego arkusza stylów w jQuery , ostatecznie znalazłem to samo rozwiązanie, co powyżej .

Chciałem tylko połączyć te dwa pytania, aby inni mogli skorzystać z późniejszych ustaleń.

Możesz umieścić style, do których potrzebujesz dostępu z jQuery w:

1. bezpośrednio nagłówek dokumentu
2. w dołączeniu, który skrypt po stronie serwera umieszcza w nagłówku

Wtedy powinno być możliwe (choć niekoniecznie łatwe) napisanie funkcji js, która przeanalizuje wszystko w tagach stylu w nagłówku dokumentu i zwróci potrzebną wartość.

Możesz użyć funkcji css (width), aby zwrócić bieżącą szerokość elementu.

to znaczy.

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

Zobacz też: http://api.jquery.com/width/ http://api.jquery.com/css/

Nie ma nic w jQuery i nic prostego nawet w javascript. Biorąc odpowiedź timofey i działając z nią, stworzyłem tę funkcję, która działa, aby uzyskać dowolne właściwości:

// 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
}

Konwertuj z pikseli na procent za pomocą mnożenia krzyżowego .

Konfiguracja formuły:

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

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

Rzeczywisty kod:

<script>

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

</script>