Diyelim ki kural şöyle:

.largeField {
    width: 65%;
}

Bir şekilde "% 65" i geri almanın bir yolu var mı, piksel değerini değil mi?

Teşekkürler.

DÜZENLEME: Ne yazık ki DOM yöntemlerini kullanmak benim durumumda güvenilmez, çünkü diğer stil sayfalarını içe aktaran bir stil sayfam var ve sonuç olarak cssRules parametresi null veya tanımsız değerle sonuçlanıyor .

Bununla birlikte, bu yaklaşım, çoğu basit durumda işe yarayacaktır (bir stil sayfası, belgenin head etiketinin içinde birden çok ayrı stil sayfası bildirimi ).

Korkarım yerleşik bir yol yok. Bunun gibi bir şey yapabilirsiniz:

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

En kolay yol

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

// >>> "65%"

Bu kesinlikle mümkün!

Önce ana öğeyi gizlemelisiniz (). Bu, JavaScript'in alt öğe için pikselleri hesaplamasını engelleyecektir.

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

Benim Bkz örnek .

Şimdi ... Bu hack'i ilk keşfeden ben miyim merak ediyorum :)

Güncelleme:

Tek astarlı

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

</body>Etiketinden önce arkasında isteyebileceğiniz gizli bir öğe bırakacaktır .remove().

Tek satırlık bir örneğe bakın .

Daha iyi fikirlere açığım!

document.styleSheetsNesneye erişebilirsiniz :

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

Geç, ancak daha yeni kullanıcılar için, css stili bir yüzde içeriyorsa şunu deneyin :

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

Adams yanıtına dayalı bir jQuery eklentisi:

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

"% 65" döndürür. Yalnızca isterseniz daha iyi çalışması için yuvarlanmış sayıları döndürür (genişlik == '% 65') Adams'ın cevabını doğrudan kullanacak olsaydın, bu işe yaramadı (64.93288590604027 gibi bir şey aldım). :)

Timofey'nin mükemmel ve şaşırtıcı çözümünü temel alan işte tam bir Javascript uygulaması:

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

Umarım birine yardımcı olur.

JQuery'de global stil sayfasının değerlerini alma konusunda benzer bir sorunum var , sonunda yukarıdaki ile aynı çözümü buldum .

Diğerlerinin daha sonraki bulgulardan yararlanabilmesi için iki soruyu birbirine bağlamak istedim.

JQuery ile erişmeniz gereken stilleri şunlardan birine koyabilirsiniz:

1. doğrudan belgenin başı
2. bir dahil, hangi sunucu tarafı komut dosyasını daha sonra kafaya koyar

Daha sonra, belge başlığındaki stil etiketleri içindeki her şeyi ayrıştırmak ve ihtiyacınız olan değeri döndürmek için bir js işlevi yazmanız (her ne kadar kolay olmasa da) mümkün olmalıdır.

Öğenin geçerli genişliğini döndürmek için css (genişlik) işlevini kullanabilirsiniz.

yani.

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

Ayrıca bkz .: http://api.jquery.com/width/ http://api.jquery.com/css/

JQuery'de hiçbir şey yoktur ve javascript'te bile basit bir şey yoktur. Timofey'in cevabını alıp onunla koşarak, istediğiniz özellikleri elde etmek için çalışan bu işlevi yarattım:

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

Çapraz çarpma kullanarak piksellerden yüzdeye dönüştürme .

Formül Kurulumu:

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

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

Gerçek kod:

<script>

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

</script>