2012-04-02 22 views
9

Sử dụng JavaScript, làm cách nào để có được giá trị thực tế cho thuộc tính CSS được thừa kế?Làm cách nào để có được CSS được thừa kế thực tế của một phần tử sử dụng JavaScript?

Ví dụ, hãy xem xét đoạn HTML sau:

<p><span style="font-size:24pt;">Test #1</span></p>​ 
<p style="font-size:24pt;">Test <span style="font-weight:bold;">#2</span></p>​ 

Sử dụng mã jQuery $('p span').css('fontSize') sẽ mang lại 32px không 24pt vì nó sử dụng getComputedStyle mà trả về sử dụng giá trị, không phải là thực tế thừa hưởng giá trị. Nhưng đôi khi phong cách sẽ trực tiếp trên phần tử tôi đang nhắm mục tiêu, đôi khi nó sẽ được kế thừa.

Here is a test case. Làm cách nào để có được thực tế CSS được thừa kế của một phần tử sử dụng JavaScript?

+0

Vấn đề ở đây là giá trị đang được chuyển đổi thành pixel. '32px' là' 24pt'. http://reeddesign.co.uk/test/points-pixels.html Kiểm tra bản trình diễn này: http://jsfiddle.net/mvqPE/1/ –

+0

@Rocket: Đúng. Đó là * chính xác * vấn đề tôi đang cố giải quyết :-p và đó là ý tôi là giá trị 'thực tế' so với' đã sử dụng' – Josh

+1

Khá chắc chắn bạn không thể nhận được giá trị "thực tế" (thiếu đọc thuộc tính 'style'). http://stackoverflow.com/a/1314845 –

Trả lời

2

Câu trả lời của @mikerobi sẽ đáp ứng trường hợp kiểm tra của bạn, nhưng để cụ thể hơn, các thuộc tính CSS duy nhất được trình duyệt hiển thị là từ getComputedStyle, vì vậy nếu nó sai ở đó thì tốt. Xem this answer từ một câu hỏi khác để biết thêm chi tiết.

+0

(Có vẻ như tham chiếu đến mikerobi là một chút lỗi thời?) – Arjan

Các vấn đề liên quan