Làm cách nào để truy cập các thuộc tính phong cách của các phần tử giả với jQuery?

Question

Đối với ngữ cảnh, đây là phần tiếp theo là an earlier question. Thay vì đào qua cssRules, tôi muốn căn cứ logic trên bộ chọn jQuery tìm kiếm các hiệu ứng của các quy tắc đó.

thuộc tính mặc định Với các

.commentarea .author:before { 
    background-image: url(http://...); 
    background-position: -9999px -9999px; 
    /* ... */ 
} 

được chọn lọc biến đổi như trong

.author[href$="gbacon"]:before /* ... */ { 
    content: ""; 
    background-position: 0 -140px 
} 

làm thế nào tôi có thể chọn pseudo-yếu tố mà tương ứng nền vị trí có giá trị mặc định? Sao chép bộ chọn như trong

GM_log("size = " + $(".commentarea .author:before").size()); 

không khớp với nội dung nào. Đang thử .siblings() với

$(".commentarea .author") 
    .map(function(i) { 
     GM_log($(this) 
        .siblings() 
        .map(function (i) { return $(this).css("background-image") }) 
        .get() 
        .join(", ")) 
     }); 

chỉ sản xuất none giá trị.

Để biết chi tiết đầy đủ, hãy xem live page. Điều này có thể không?

Answer 1

Bạn không thể sử dụng các yếu tố giả :before và :after giả như thế này. Mục đích của chúng là chèn nội dung trước và sau (tương ứng) bộ chọn bạn đã chỉ định. sử dụng

Ví dụ:

HTML:

<span class='a'> 
    Outer 
    <span class='b'> 
     Inner 
    </span> 
</span> 

CSS:

.a .b:before { 
    content: "|Inserted using :before|"; 
} 

.a { 
    color: blue; 
} 

.b { 
    color: red; 
} 

Kết quả:

http://jsfiddle.net/mzcp6/

Điều gì đã xảy ra là văn bản |Inserted using :before| được chèn trước (tốt, thực sự, được thêm vào) khoảng cách bên trong vì nó là lớp b và hậu duệ của một phần tử của lớp a. Về cơ bản, :before và :after không chọn; họ sửa đổi.

Ví dụ:

này không hoạt động như mong đợi:

HTML:

<span class='a'> 
    <p>More text</p> 
    <span class='b'> 
     <p>More text</p> 
     Inner 
    </span> 
</span> 

CSS:

.a .b:before { 
    text-size: 100px; 
} 

Không có gì xảy ra:

http://jsfiddle.net/bQ2ty/

EDIT:

:before không phải là một selector jQuery hợp lệ: http://api.jquery.com/category/selectors/

Tôi nghĩ rằng bạn sẽ cần phải sử dụng một cái gì đó khác hơn :before hoặc cố để trích xuất các quy tắc ban đầu sử dụng các plugin jQuery : http://flesler.blogspot.com/2007/11/jqueryrule.html

Answer 2

Đây là giải pháp sử dụng javascript đơn giản:

// Get the color value of .element:before 
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before' 
).getPropertyValue('color'); 

// Get the content value of .element:before 
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before' 
).getPropertyValue('content');