Tôi làm cách nào để có được giá trị CSS được kế thừa bằng cách sử dụng Javascript?

Question

Tôi đang cố gắng lấy giá trị của một thuộc tính CSS được thừa hưởng bằng cách sử dụng Javascript. Tôi đã không thể tìm thấy một câu trả lời toàn diện.

Ví dụ CSS:

div { 
    width: 80%; 
} 

Ví dụ Markup:

<div id="mydiv"> Some text </div> 

Sử dụng javascript (jQuery, hoặc mẹ đẻ), tôi cần để có được chiều rộng của element-- không bằng pixel, nhưng chuỗi "80%".

$('#mydiv').css('width'); // returns in px 
$('#mydiv')[0].style.width // empty string 
getComputedStyle($('#mydiv')[0]).width // returns in px 

Lý do tôi cần giá trị dưới dạng chuỗi là vì tôi cần sao chép kiểu này sang yếu tố khác. Nếu nó được khai báo là phần trăm, giá trị khác cần phải là phần trăm. Nếu nó được khai báo bằng px, giá trị khác cần phải bằng px.

Bí quyết thực sự là thuộc tính này có thể được kế thừa, không được khai báo rõ ràng trên phần tử (như trong ví dụ của tôi).

Có ai có ý tưởng nào không?

Answer 1

Không có cách nào để có được những giá trị phần trăm Tôi sợ. Bạn có thể thử một cái gì đó như thế này:

var widthpx = getComputedStyle($('#mydiv')[0]).width; 
var parentWidth = $('#mydiv').parent().css('width') 

var width = (100 * parseFloat(widthpx)/parseFloat(parentWidth)) + '%'; 

Answer 2

lấy giá trị offSetWidth của phần tử và offsetWidth của offsetParent của nó và tính phần trăm từ hai số nguyên.

Answer 3

Điều này liên kết trình xử lý sự kiện với thành phần cho sự kiện click và cảnh báo độ rộng tương đối của phần tử so với phần tử gốc của phần tử đó.

​$('#mydiv').on('click', function() { 

    //element width divided by parent width times 100 to make a percentage 
    alert(Math.round($(this).width()/$(this).parent().width() * 100) + '%'); 
});​​​​​​​​​​ 

Đây là một bản demo: http://jsfiddle.net/X67p5/

Answer 4

Những gì bạn đang tìm kiếm là this quirksmode.org article. Nó đề xuất chức năng

function getStyle(el, styleProp) { 
    var x = document.getElementById(el); 
    if (x.currentStyle) 
     var y = x.currentStyle[styleProp]; 
    else if (window.getComputedStyle) 
     var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
    return y; 
} 

Tuy nhiên, bạn nên đọc kỹ bài viết đó. Họ tên của styleProp s không thực sự qua trình duyệt, và bạn sẽ thấy cách trình duyệt khác nhau xử lý này. Opera dường như có sự hỗ trợ tốt nhất để báo cáo các giá trị chính xác.