Блог

Главная - Вопросы по программированию - Извлекать значение свойства содержимого псевдоэлемента с помощью JavaScript

Извлекать значение свойства содержимого псевдоэлемента с помощью JavaScript

#javascript #css #selector

#javascript #jquery #HTML #css #псевдоэлемент

Вопрос:

У меня есть следующий код jQuery:

 $.each($(".coin"), function() {
    var content = "/*:before content*/";
    $("input", this).val(content);
});

Я хотел бы изменить значение каждого входного элемента с помощью jQuery на основе content значения свойства его псевдоэлемента ( .coin:before ).

Вот пример:http://jsfiddle.net/aledroner/s2mgd1mo/2 /

Комментарии:

1. Итак, в чем вопрос?

2. Как я могу это сделать? отсутствует код /*:перед содержимым*/

3. Я не могу понять, ваш код работает, что вы хотите иметь во входных данных .coin?

4. Мой код не работает. Обратите внимание, что два первых ввода не имеют атрибута value, но входные данные после <h3>Конечного результата</h3> да. <h3> Конечный результат </h3> — это только решение проблемы, но код Jquery не действует на эти входные данные. Посмотрите на это: jsfiddle.net/aledroner/s2mgd1mo/3 . Я только хочу изменить /* перед содержимым */ на значение атрибута ‘content’ каждого псевдоэлемента

5. Где находится атрибут content ? Я не вижу его.

Ответ №1:

Согласно MDN, вторым параметром .getComputedStyle() метода является псевдоэлемент:

 var style = window.getComputedStyle(element[, pseudoElt]);

Псевдоэлемент (необязательно) — строка, указывающая псевдоэлемент, которому нужно соответствовать. Должно быть опущено (или null) для обычных элементов.

Поэтому вы могли бы использовать следующее, чтобы получить content значение псевдоэлемента:

 window.getComputedStyle(this, ':before').content;

Обновленный пример

 $('.coin').each(function() {
  var content = window.getComputedStyle(this, ':before').content;
  $("input", this).val(content);
});

Если вы хотите получить код объекта на основе символа, вы также можете использовать следующее:

 function getEntityFromCharacter(character) {
  var hexCode = character.replace(/['"]/g, '').charCodeAt(0).toString(16).toUpperCase();
  while (hexCode.length < 4) {
    hexCode = '0'   hexCode;
  }

  return '\'   hexCode   ';';
}
$('.coin').each(function() {
  var content = window.getComputedStyle(this, ':before').content;
  $('input', this).val(getEntityFromCharacter(content));
});  
 .dollar:before {
  content: '024'
}
.yen:before {
  content: '0A5'
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="coin dollar">
  <input type="text" />
</div>
<div class="coin yen">
  <input type="text" />
</div>

Комментарии:

1. Но мне нужно, чтобы результат был » 0024″, а не «$»

2. @aledroner Вам нужно преобразовать его. Смотрите этот обновленный пример: jsfiddle.net/vzxyv9ua

3. Ты гений. Спасибо!