Bunun, jQuery'nin yapabileceği diğer her şeyle birlikte, cevaplanması basit bir soru olacağını düşünürdünüz. Ne yazık ki, sorun teknik bir sorunla ilgilidir: css: after ve: önce kurallar DOM'un bir parçası değildir ve bu nedenle jQuery'nin DOM yöntemleri kullanılarak değiştirilemez.
Orada olan JavaScript ve / veya CSS geçici çözümleri kullanarak bu öğeleri işlemek için yollar; hangisini kullandığınız kesin gereksinimlerinize bağlıdır.
Ben yaygın olarak "en iyi" yaklaşım olarak kabul ile başlayacağım:
1) Önceden belirlenmiş bir sınıf ekleme / kaldırma
Bu yaklaşımda, CSS'nizde farklı :afterveya :beforestile sahip bir sınıf oluşturdunuz . Geçersiz kıldığından emin olmak için bu "yeni" sınıfı daha sonra stil sayfanıza yerleştirin:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
Daha sonra jQuery (veya vanilya JavaScript) kullanarak bu sınıfı kolayca ekleyebilir veya kaldırabilirsiniz:
$('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>
- Artıları: jQuery ile uygulanması kolaydır; aynı anda birden fazla stili hızla değiştirir; endişelerin ayrılmasını zorunlu kılar (CSS ve JS'nizi HTML'nizden ayırma)
- Eksileri: CSS önceden yazılmış olmalıdır, bu yüzden içeriği dinamik
:beforeveya :aftertamamen dinamik değil
2) Yeni stilleri doğrudan belgenin stil sayfasına ekleyin
JavaScript'i, stilleri :afterve :beforestiller de dahil olmak üzere doğrudan belge stil sayfasına eklemek için kullanmak mümkündür . jQuery uygun bir kısayol sağlamaz, ancak Neyse ki JS o kadar karmaşık değildir:
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()ve ilgili .insertRule()yöntemler bugün oldukça iyi desteklenmektedir.
Varyasyon olarak, jQuery'yi belgeye tamamen yeni bir stil sayfası eklemek için de kullanabilirsiniz, ancak gerekli kod daha temiz değildir:
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>
Değerleri yalnızca "eklemekten" değil, yalnızca onlara eklemekten bahsediyorsak , var olan veya stilleri farklı bir yaklaşım kullanarak da okuyabiliriz:after:before :
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>
Biz yerini alabilir document.querySelector('p')ile $('p')[0]biraz daha kısa kod, jQuery kullanırken.
- Artıları: herhangi bir dize stile dinamik olarak eklenebilir
- Eksileri: orijinal stiller değiştirilmez, sadece geçersiz kılınır; tekrarlanan (ab) kullanım DOM'nin gelişigüzel büyümesini sağlayabilir
3) Farklı bir DOM özelliğini değiştirme
Belirli bir DOM özelliğini okumak için CSS'nizde de kullanabilirsinizattr() . ( Bir tarayıcı destekliyorsa :beforeda destekliyor attr(). ) Bunu content:dikkatle hazırlanmış bir CSS ile birleştirerek , dinamik olarak :beforeve içeriğini (( kenar boşluğu veya renk gibi diğer özellikleri değiştiremeyiz) değiştirebiliriz :after:
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>
CSS önceden hazırlanamazsa, bu ikinci teknikle birleştirilebilir:
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>
- Artıları: Sonsuz ekstra stil oluşturmaz
- Eksileri:
attr CSS'de URL'lere veya RGB renklerine değil, yalnızca içerik dizelerine uygulanabilir