jQuery và các phần tử giả

Question

Tôi đã tự động thay đổi vị trí của phần tử en được xác định trong CSS với :after. Tôi đã cố gắng thay đổi theo cách này:

$(function(){ 
    $('div::after').css({'top':'20px'}) 
}) 

Nhưng nó không hoạt động. Có cách nào để thay đổi vị trí không?

Answer 1

Bạn không thể. Nội dung được tạo bởi :after hoặc :before không phải là một phần của DOM và do đó không thể được chọn hoặc sửa đổi.

Nếu bạn xem cái này example fiddle và kiểm tra DOM trong Firebug hoặc tương tự, bạn sẽ thấy rằng phần tử giả không có trong cây DOM.

Một giải pháp tiềm năng sẽ được áp dụng một lớp học để các yếu tố bạn muốn thay đổi, và để tạo kiểu lớp đó một cách thích hợp trong CSS:

$("div").addClass("newClass"); 

Xem this fiddle for an example.

Answer 2

add CSS:

p.special:before { 
    content: "bar"; 
    position: absolute; 
    top : 10px; 
} 

giả style sheet nơi mã trên được đặt là người đầu tiên trên trang web, sử dụng này để thay đổi nó:

document.styleSheets[0].addRule('p.special:before','top: 15px;');