Как изменить содержимое элемента psudo на основе идентификатора в CSS

Question

<span id="opensidebarid" class="icon"></span>

CSS:

.icon:before {
   content: 'close';
}

Я хочу изменить содержимое :before, используя идентификатор JavaScript (jQuery). Как это возможно? Я пробовал использовать prop, но совсем не работал.

Answer 1

Вы можете установить атрибут в своем css, чтобы получать данные содержимого оттуда, а затем вы можете изменить этот атрибут, используя jQuery, поскольку вы не можете напрямую изменить содержимое элемента :before:

CSS:

.icon:before {
   content: attr(data);
}

jQuery:

$(document).ready(function(){
  $elem = $("#opensidebarid"); // Get element by ID.
  elemClass = $elem.attr("class"); // Get the class of that element in order to change content.
  $('.' + elemClass).attr('data', "open"); // Change attribute value of content.
});

Answer 2

Подумав немного, я понял ваш вопрос. :: before - это псевдоселектор, а не элемент DOM. Таким образом, вы не можете выбрать его через jQuery.

Вы можете toggleClass через jQuery, если хотите изменить :: before.

Вы можете изменить его, создав класс переключения . Например:

.icon-toggle {content: "example" !important}

Затем вы можете создать либо onclick, либо какое-либо действие для переключения изменения.

$("#opensidebarid").toggleClass("icon-toggle")

Если бы вы могли написать более подробный вопрос, я мог бы вам больше помочь.