Находит все теги IMG аватаров пользователей и создаёт div-элемент для обёртки всех этих тегов.
Кто-нибудь знает, как это сделать? Я вставляю div в тег img аватара пользователя, а затем могу использовать этот вставленный div как рамку для аватара.
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
// Найти все элементы img с классом avatar
const avatarImages = document.querySelectorAll('img.avatar');
avatarImages.forEach(img => {
// Создать новый элемент div и установить его класс как by9700
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// Переместить элемент img внутрь нового div
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
});
});
</script>
Вот так, но код не работает.
Привет 
Что именно вы хотите достичь? Разве это невозможно сделать, например, с помощью псевдоэлемента CSS?
Элементы псевдоклассов могут быть реализованы, но ему нужно скорректировать положение каждого кадра аватара, и он может адаптироваться к размеру аватара без использования псевдоклассов
Похоже, это работает — не могли бы вы поделиться, как вы используете этот код?
Однако на той же странице также происходят изменения элементов. Поэтому я внес некоторые правки в ваш код, которые должны удовлетворять требованиям:
const throttle = require("@ember/runloop").throttle;
const context = {
wrapImg() {
const avatarImages = document.querySelectorAll('img.avatar:not(.wrapped)');
avatarImages.forEach(img => {
// Создаем новый элемент div и задаем ему класс by9700
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// Перемещаем элемент img внутрь нового div
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
// Помечаем img
img.classList.add("wrapped");
});
}
};
new MutationObserver(() => {
throttle(context, context.wrapImg, 100);
}).observe(document.body, {
childList: true, // Наблюдаем за изменениями дочерних узлов: добавлением или удалением
attributes: false, // Не наблюдаем за изменениями атрибутов
subtree: true // Рекурсивно наблюдаем за всеми потомками
});
Спасибо большое за ваш ответ! Я нашел обходной путь: используйте JavaScript-код, чтобы найти тег img с классом avatar и создать тег div с классом avatar-wrappers, который будет его оборачивать. Таким образом, все аватары пользователей окажутся внутри newly созданного div, а затем с помощью псевдоэлементов и CSS для групп пользователей можно добавить различные рамки для аватаров. После этого автоматически подстраивайте высоту и ширину рамки аватара, определяя размеры аватара пользователя через JavaScript. Это позволяет реализовать глобальные рамки аватаров для всего сайта.
Ниже я поделился JavaScript-кодом:
<script type="text/javascript">
(function() {
function wrapAvatars() {
// Получаем все теги img с классом avatar
var avatars = document.querySelectorAll('img.avatar');
// Перебираем каждый img.avatar
avatars.forEach(function(avatar) {
// Проверяем, не был ли img уже обернут
if (!avatar.parentNode.classList.contains('avatar-wrappers')) {
// Создаем новый элемент div
var wrapper = document.createElement('div');
// Добавляем пользовательский класс новому div
wrapper.className = 'avatar-wrappers';
// Оборачиваем img.avatar в новый div
avatar.parentNode.insertBefore(wrapper, avatar);
wrapper.appendChild(avatar);
}
});
}
// Слушаем загрузку DOM
document.addEventListener('DOMContentLoaded', function() {
wrapAvatars();
// Используем MutationObserver для отслеживания изменений в DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
wrapAvatars();
}
});
});
// Настраиваем параметры наблюдателя
var config = { childList: true, subtree: true };
// Начинаем наблюдение за корневым элементом документа
observer.observe(document.body, config);
});
})();
</script>
<script type="text/javascript">
(function() {
function adjustWrapperSizes() {
// Получаем все div с классом avatar-wrapper
var wrappers = document.querySelectorAll('div.avatar-wrapper');
// Значения увеличения ширины и высоты
var widthIncrease = 9; // Например, увеличить на 20px
var heightIncrease = 9; // Например, увеличить на 20px
// Перебираем каждый div.avatar-wrapper
wrappers.forEach(function(wrapper) {
// Получаем дочерний элемент img
var img = wrapper.querySelector('img');
if (img) {
// Получаем фактическую ширину и высоту img
var imgWidth = img.offsetWidth;
var imgHeight = img.offsetHeight;
// Вычисляем новые ширину и высоту
var newWidth = imgWidth + widthIncrease;
var newHeight = imgHeight + heightIncrease;
// Устанавливаем ширину и высоту div
wrapper.style.width = newWidth + 'px';
wrapper.style.height = newHeight + 'px';
}
});
}
// Убеждаемся, что функция выполняется после загрузки DOM
document.addEventListener('DOMContentLoaded', function() {
adjustWrapperSizes();
// Используем MutationObserver для отслеживания изменений в DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
adjustWrapperSizes();
}
});
});
// Настраиваем параметры наблюдателя
var config = { childList: true, subtree: true };
// Начинаем наблюдение за корневым элементом документа
observer.observe(document.body, config);
});
})();
</script>
