Bạn sẽ nghĩ rằng đây sẽ là một câu hỏi đơn giản để trả lời, với mọi thứ khác mà jQuery có thể làm. Thật không may, vấn đề bắt nguồn từ một vấn đề kỹ thuật: css: after và: before quy tắc không phải là một phần của DOM và do đó không thể thay đổi bằng các phương thức DOM của jQuery.
Có nhiều cách để thao tác các phần tử này bằng cách sử dụng JavaScript và / hoặc giải pháp CSS; cái nào bạn sử dụng phụ thuộc vào yêu cầu chính xác của bạn.
Tôi sẽ bắt đầu với những gì được coi là phương pháp "tốt nhất":
1) Thêm / xóa một lớp định trước
Theo cách tiếp cận này, bạn đã tạo một lớp trong CSS bằng một kiểu :afterhoặc :beforekiểu khác. Đặt lớp "mới" này sau trong biểu định kiểu của bạn để đảm bảo nó ghi đè:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
Sau đó, bạn có thể dễ dàng thêm hoặc xóa lớp này bằng jQuery (hoặc vanilla JavaScript):
$('p').on('click', function() {
$(this).toggleClass('special');
});
$('p').on('click', function() {
$(this).toggleClass('special');
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
p.special:before {
content: "bar";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- Ưu điểm: Dễ thực hiện với jQuery; nhanh chóng thay đổi nhiều phong cách cùng một lúc; thực thi tách các mối quan tâm (tách biệt CSS và JS khỏi HTML của bạn)
- Nhược điểm: CSS phải được viết sẵn, vì vậy nội dung của
:beforehoặc :afterkhông hoàn toàn động
2) Thêm kiểu mới trực tiếp vào biểu định kiểu của tài liệu
Có thể sử dụng JavaScript để thêm kiểu trực tiếp vào biểu định kiểu tài liệu, bao gồm :aftervà :beforekiểu. jQuery không cung cấp một lối tắt thuận tiện, nhưng may mắn thay, JS không phức tạp như vậy:
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
.addRule()và các .insertRule()phương pháp liên quan được hỗ trợ khá tốt hiện nay.
Là một biến thể, bạn cũng có thể sử dụng jQuery để thêm một biểu định kiểu hoàn toàn mới vào tài liệu, nhưng mã cần thiết không phải là bất kỳ trình dọn dẹp nào:
var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
Nếu chúng ta đang nói về việc "thao túng" các giá trị, không chỉ thêm vào chúng, chúng ta cũng có thể đọc các kiểu hiện có :afterhoặc :beforekiểu sử dụng một cách tiếp cận khác:
var str = window.getComputedStyle(document.querySelector('p'), ':before')
.getPropertyValue('content');
var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);
document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
content:"foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
Chúng ta có thể thay thế document.querySelector('p')bằng $('p')[0]khi sử dụng jQuery, với mã ngắn hơn một chút.
- Ưu điểm: bất kỳ chuỗi nào có thể được tự động chèn vào kiểu
- Nhược điểm: kiểu gốc không bị thay đổi, chỉ bị ghi đè; việc sử dụng lặp đi lặp lại (ab) có thể làm cho DOM phát triển lớn tùy ý
3) Thay đổi thuộc tính DOM khác
Bạn cũng có thể sử dụng attr()CSS của mình để đọc một thuộc tính DOM cụ thể. ( Nếu một trình duyệt hỗ trợ :before, nó cũng hỗ trợ attr(). ) Bằng cách kết hợp điều này với content:một số CSS được chuẩn bị kỹ lưỡng, chúng tôi có thể thay đổi nội dung (nhưng không phải các thuộc tính khác, như lề hoặc màu) :beforevà :afterđộng:
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
JS:
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Điều này có thể được kết hợp với kỹ thuật thứ hai nếu CSS không thể được chuẩn bị trước thời hạn:
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
$(this).attr('data-before', str);
});
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');
$('p').on('click', function() {
$(this).attr('data-before', str);
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- Ưu điểm: Không tạo ra các kiểu phụ vô tận
- Nhược điểm:
attr trong CSS chỉ có thể áp dụng cho chuỗi nội dung, không phải URL hoặc màu RGB