Giả sử quy tắc như sau:

.largeField {
    width: 65%;
}

Có cách nào để lấy lại '65% ', chứ không phải giá trị pixel không?

Cảm ơn.

CHỈNH SỬA: Rất tiếc, việc sử dụng các phương thức DOM là không đáng tin cậy trong trường hợp của tôi, vì tôi có một biểu định kiểu nhập các biểu định kiểu khác và kết quả là tham số cssRules kết thúc bằng giá trị null hoặc không xác định .

Tuy nhiên, cách tiếp cận này sẽ hoạt động trong hầu hết các trường hợp đơn giản (một biểu định kiểu, nhiều khai báo biểu định kiểu riêng biệt bên trong thẻ head của tài liệu).

Tôi e rằng không có cách nào được xây dựng sẵn. Bạn có thể làm điều gì đó như sau:

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

Cách dễ dàng nhất

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

// >>> "65%"

Điều này chắc chắn là có thể!

Đầu tiên bạn phải ẩn () phần tử cha. Điều này sẽ ngăn JavaScript tính toán pixel cho phần tử con.

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

Hãy xem ví dụ của tôi .

Bây giờ ... tôi tự hỏi liệu mình có phải là người đầu tiên phát hiện ra bản hack này không :)

Cập nhật:

Lót

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

Nó sẽ để lại một phần tử ẩn trước </body>thẻ mà bạn có thể muốn .remove().

Xem ví dụ về một lớp lót .

Tôi cởi mở với những ý tưởng tốt hơn!

Bạn có thể truy cập document.styleSheetsđối tượng:

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

Đã muộn, nhưng đối với những người dùng mới hơn, hãy thử điều này nếu kiểu css chứa phần trăm :

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

Một plugin jQuery dựa trên câu trả lời của 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());​​​​​

Sẽ trả về '65% '. Chỉ trả về các số được làm tròn để hoạt động tốt hơn nếu bạn thích if (width == '65%'). Nếu bạn đã sử dụng câu trả lời trực tiếp của Adams, điều đó đã không hoạt động (tôi nhận được một cái gì đó giống như 64.93288590604027). :)

Được xây dựng dựa trên giải pháp tuyệt vời và đáng ngạc nhiên của timofey, đây là cách triển khai Javascript thuần túy:

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

Hy vọng nó hữu ích cho ai đó.

Tôi gặp sự cố tương tự trong Lấy giá trị của biểu định kiểu toàn cục trong jQuery , cuối cùng tôi đã đưa ra giải pháp tương tự như trên .

Chỉ muốn liên kết chéo hai câu hỏi để những người khác có thể hưởng lợi từ những phát hiện sau này.

Bạn có thể đặt các kiểu bạn cần truy cập bằng jQuery vào:

1. người đứng đầu tài liệu trực tiếp
2. trong một bao gồm, tập lệnh phía máy chủ nào sau đó sẽ đưa vào đầu

Sau đó, có thể (mặc dù không nhất thiết phải dễ dàng) để viết một hàm js để phân tích cú pháp mọi thứ trong các thẻ kiểu trong phần đầu tài liệu và trả về giá trị bạn cần.

Bạn có thể sử dụng hàm css (width) để trả về chiều rộng hiện tại của phần tử.

I E.

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

Xem thêm: http://api.jquery.com/width/ http://api.jquery.com/css/

Không có gì trong jQuery và không có gì đơn giản ngay cả trong javascript. Lấy câu trả lời của timofey và chạy với nó, tôi đã tạo ra hàm này hoạt động để có được bất kỳ thuộc tính nào bạn muốn:

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

Chuyển đổi từ pixel thành phần trăm bằng phép nhân chéo .

Thiết lập Công thức:

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

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

Mã thực tế:

<script>

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

</script>