Misalkan aturannya adalah sebagai berikut:

.largeField {
    width: 65%;
}

Apakah ada cara untuk mendapatkan kembali '65% ', dan bukan nilai pikselnya?

Terima kasih.

EDIT: Sayangnya menggunakan metode DOM tidak dapat diandalkan dalam kasus saya, karena saya memiliki stylesheet yang mengimpor stylesheet lain, dan sebagai hasilnya parameter cssRules berakhir dengan nilai null atau tidak ditentukan .

Namun, pendekatan ini akan berfungsi di sebagian besar kasus langsung (satu stylesheet, beberapa deklarasi stylesheet terpisah di dalam tag head dokumen).

Tidak ada cara bawaan, saya khawatir. Anda bisa melakukan sesuatu seperti ini:

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

Cara paling mudah

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

// >>> "65%"

Ini sangat mungkin!

Anda harus terlebih dahulu menyembunyikan () elemen induk. Ini akan mencegah JavaScript menghitung piksel untuk elemen anak.

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

Lihat contoh saya .

Sekarang ... Saya ingin tahu apakah saya pertama kali menemukan peretasan ini :)

Memperbarui:

Satu baris

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

Ini akan meninggalkan elemen tersembunyi sebelum </body>tag, yang mungkin Anda inginkan .remove().

Lihat contoh satu baris .

Saya terbuka untuk ide yang lebih baik!

Anda dapat mengakses document.styleSheetsobjek:

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

Terlambat, tetapi untuk pengguna baru, coba ini jika gaya css berisi persentase :

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

Sebuah plugin jQuery berdasarkan jawaban Adams:

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

Akan mengembalikan '65% '. Hanya mengembalikan angka yang dibulatkan untuk bekerja lebih baik jika Anda suka jika (lebar == '65%'). Jika Anda akan menggunakan jawaban Adams secara langsung, itu tidak berhasil (saya mendapatkan sesuatu seperti 64.93288590604027). :)

Membangun solusi timofey yang sangat baik dan mengejutkan, berikut ini adalah implementasi Javascript murni:

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

Semoga bermanfaat bagi seseorang.

Saya memiliki masalah serupa dalam Mendapatkan nilai stylesheet global di jQuery , akhirnya saya menemukan solusi yang sama seperti di atas .

Hanya ingin menghubungkan kedua pertanyaan tersebut sehingga orang lain bisa mendapatkan keuntungan dari temuan selanjutnya.

Anda dapat menempatkan gaya yang perlu Anda akses dengan jQuery di:

1. kepala dokumen secara langsung
2. di include, yang kemudian ditempatkan skrip sisi server di head

Maka seharusnya dimungkinkan (meskipun tidak selalu mudah) untuk menulis fungsi js untuk mengurai semua yang ada di dalam tag gaya di kepala dokumen dan mengembalikan nilai yang Anda butuhkan.

Anda dapat menggunakan fungsi css (width) untuk mengembalikan lebar elemen saat ini.

yaitu.

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

Lihat juga: http://api.jquery.com/width/ http://api.jquery.com/css/

Tidak ada apa pun di jQuery, dan tidak ada yang langsung bahkan di javascript. Mengambil jawaban timofey dan menjalankannya, saya membuat fungsi ini yang berfungsi untuk mendapatkan properti apa pun yang Anda inginkan:

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

Ubah dari piksel menjadi persentase menggunakan perkalian silang .

Penyetelan Formula:

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

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

Kode sebenarnya:

<script>

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

</script>