Ви можете подумати, що це відповідь на просте запитання з усім іншим, що може зробити jQuery. На жаль, проблема зводиться до технічної проблеми: css: after і: раніше правила не є частиною DOM, і тому їх не можна змінити, використовуючи методи DOM jQuery.
Там є способи маніпулювати ці елементи , використовуючи JavaScript і / або CSS обхідні шляхи; який ви використовуєте, залежить від ваших точних вимог.
Почну з того, що широко вважається "найкращим" підходом:
1) Додати / видалити заздалегідь визначений клас
При такому підході, ви вже створили клас у вашому CSS з іншим :afterабо :beforeстилем. Помістіть цей "новий" клас пізніше у таблицю стилів, щоб переконатися, що він перевищує:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
Тоді ви можете легко додати або видалити цей клас за допомогою jQuery (або ванільного 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>
- Плюси: простота в реалізації за допомогою jQuery; швидко змінює декілька стилів одночасно; застосовує розділення проблем (ізоляція CSS та JS від HTML)
- Мінуси: CSS повинен бути попередньо записаний, тому вміст
:beforeабо :afterне є повністю динамічним
2) Додайте нові стилі безпосередньо до таблиці стилів документа
Можна використовувати JavaScript для додавання стилів безпосередньо до таблиці стилів документа, включаючи :afterта :beforeстилі. jQuery не пропонує зручного ярлика, але, на щастя, JS не такий складний:
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()і пов'язані з ними .insertRule()методи сьогодні досить добре підтримуються.
Як варіант, ви також можете використовувати jQuery, щоб додати в документ абсолютно новий таблицю стилів, але необхідний код не є чистішим:
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>
Якщо ми говоримо про "маніпулювання" значеннями, а не просто додавання до них, ми можемо також прочитати існуючі :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>
Ми можемо замінити document.querySelector('p')з $('p')[0]при використанні JQuery, трохи коротший код.
- Плюси: будь-який рядок можна динамічно вставляти в стиль
- Мінуси: оригінальні стилі не змінені, а лише замінені; багаторазове (ab) використання може зробити DOM довільно зростати
3) Змініть інший атрибут DOM
Ви також можете використовувати attr()у своєму CSS для читання певного атрибута DOM. ( Якщо браузер підтримує :before, він також підтримує attr(). ) Комбінуючи це з content:деякими ретельно підготовленими CSS, ми можемо змінити вміст (але не інші властивості, такі як поля чи колір) :beforeта :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 не може бути підготовлений достроково:
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>
- Плюси: не створює нескінченних додаткових стилів
- Мінуси:
attr у CSS можна застосовувати лише до рядків вмісту, а не до URL-адрес або кольорів RGB