Detecta las etiquetas IMG de todos los avatares de usuario y crea un div para envolver las etiquetas IMG de todos los usuarios
¿Alguien sabe cómo? Inserto el div en la etiqueta img del avatar del usuario, y luego puedo establecer el div insertado como el marco del avatar.
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
// Find all img elements with the class avatar
const avatarImages = document.querySelectorAll('img.avatar');
avatarImages.forEach(img => {
// Create a new div element and set its class name to by9700
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// Move the img element into the new div
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
});
});
</script>
It's like this, but the code doesn't take effectHola 
¿Qué quieres lograr exactamente? ¿Es algo que no es posible con, por ejemplo, un pseudo-elemento CSS?
Los elementos de pseudoclase se pueden implementar, pero necesita ajustar la posición de cada fotograma del avatar, y puede adaptarse al tamaño del avatar sin usar pseudoclases.
Supongo que funciona. ¿Puedes compartir cómo usas este código?
Sin embargo, también tenemos cambios de elementos en la misma página. Por lo tanto, hice algunas modificaciones a tu código, que deberían cumplir con los requisitos:
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 // 递归观察子节点
});
Muchas gracias por tu respuesta, he encontrado una solución alternativa, usa código JavaScript para detectar una etiqueta img con una clase avatar y crea una etiqueta div con una clase avatar-wrappers para envolverla, de modo que todos los avatares del usuario queden rodeados por un div recién creado, y luego usa elementos de pseudo-clase para agregar diferentes marcos de avatar para miembros de diferentes grupos de usuarios a través de css del grupo de usuarios. Luego, ajusta automáticamente la altura y el ancho del marco del avatar identificando el ancho y el alto del avatar del usuario a través de JavaScript. Esto implementa el marco de avatar global del sitio web.
Comparto el código JavaScript a continuación
<script type="text/javascript">
(function() {
function wrapAvatars() {
// Obtener todas las etiquetas img con la clase avatar
var avatars = document.querySelectorAll('img.avatar');
// Iterar sobre cada img.avatar
avatars.forEach(function(avatar) {
// Comprobar si la img ya ha sido envuelta
if (!avatar.parentNode.classList.contains('avatar-wrappers')) {
// Crear un nuevo elemento div
var wrapper = document.createElement('div');
// Añadir una clase personalizada al div recién creado
wrapper.className = 'avatar-wrappers';
// Envolver la img.avatar en el nuevo div
avatar.parentNode.insertBefore(wrapper, avatar);
wrapper.appendChild(avatar);
}
});
}
// Escuchar la carga inicial de la página
document.addEventListener('DOMContentLoaded', function() {
wrapAvatars();
// Usar MutationObserver para observar los cambios en el DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
wrapAvatars();
}
});
});
// Configurar las opciones del observador
var config = { childList: true, subtree: true };
// Comenzar a observar el elemento raíz del documento
observer.observe(document.body, config);
});
})();
</script>
<script type="text/javascript">
(function() {
function adjustWrapperSizes() {
// Obtener todos los div con la clase avatar-wrapper
var wrappers = document.querySelectorAll('div.avatar-wrapper');
// Establecer los valores de aumento de ancho y alto
var widthIncrease = 9; // Por ejemplo, aumentar 20px
var heightIncrease = 9; // Por ejemplo, aumentar 20px
// Iterar sobre cada div.avatar-wrapper
wrappers.forEach(function(wrapper) {
// Obtener el elemento img hijo actual del div
var img = wrapper.querySelector('img');
if (img) {
// Obtener el ancho y alto real de la img
var imgWidth = img.offsetWidth;
var imgHeight = img.offsetHeight;
// Calcular el nuevo ancho y alto
var newWidth = imgWidth + widthIncrease;
var newHeight = imgHeight + heightIncrease;
// Establecer el ancho y alto del div
wrapper.style.width = newWidth + 'px';
wrapper.style.height = newHeight + 'px';
}
});
}
// Asegurarse de que se ejecute al cargar el contenido del DOM por primera vez
document.addEventListener('DOMContentLoaded', function() {
adjustWrapperSizes();
// Usar MutationObserver para observar los cambios en el DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
adjustWrapperSizes();
}
});
});
// Configurar las opciones del observador
var config = { childList: true, subtree: true };
// Comenzar a observar el elemento raíz del documento
observer.observe(document.body, config);
});
})();
</script>
