Detecta as tags IMG de todos os avatares de usuário e cria uma div para envolver as tags IMG de todos os usuários
Alguém sabe como? Eu insiro a div na tag img do avatar do usuário e, em seguida, posso definir a div inserida como o frame do avatar
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
// Encontra todos os elementos img com a classe avatar
const avatarImages = document.querySelectorAll('img.avatar');
avatarImages.forEach(img => {
// Cria um novo elemento div e define seu nome de classe como by9700
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// Move o elemento img para dentro do novo div
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
});
});
</script>
É assim, mas o código não tem efeito
Olá 
O que você quer alcançar exatamente? Isso é algo que não é possível com, por exemplo, um pseudo-elemento CSS?
2 curtidas
Elementos de pseudo-classe podem ser implementados, mas ele precisa ajustar a posição de cada quadro de avatar e pode se adaptar ao tamanho do avatar sem usar pseudo-classes.
Acho que funciona – Você pode compartilhar como usa este código?
No entanto, também temos alterações de elementos na mesma página. Portanto, fiz algumas modificações no seu código, que devem atender aos requisitos:
const throttle = require("@ember/runloop").throttle;
const context = {
wrapImg() {
const avatarImages = document.querySelectorAll('img.avatar:not(.wrapped)');
avatarImages.forEach(img => {
// Cria um novo elemento div e define seu nome de classe como by9700
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// Move o elemento img para dentro do novo div
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
// Marca o img
img.classList.add("wrapped");
});
}
};
new MutationObserver(() => {
throttle(context, context.wrapImg, 100);
}).observe(document.body, {
childList: true, // Observa mudanças nos nós filhos do alvo, se há adição ou remoção
attributes: false, // Não observa mudanças de atributos
subtree: true // Observa recursivamente os nós filhos
});
1 curtida
Muito obrigado pela sua resposta, encontrei uma solução alternativa, use código JavaScript para detectar uma tag img com a classe avatar e crie uma tag div com a classe avatar-wrappers para envolvê-la, de modo que todos os avatares do usuário sejam cercados por uma div recém-criada e, em seguida, use elementos de pseudo-classe para adicionar diferentes molduras de avatar para membros de diferentes grupos de usuários via CSS do grupo de usuários. Em seguida, ajuste automaticamente a altura e a largura da moldura do avatar identificando a largura e a altura do avatar do usuário por meio de JavaScript. Isso implementa a moldura de avatar global do site.
Compartilhei o código JavaScript abaixo
<script type="text/javascript">
(function() {
function wrapAvatars() {
// Obtém todas as tags img com a classe avatar
var avatars = document.querySelectorAll('img.avatar');
// Itera sobre cada img.avatar
avatars.forEach(function(avatar) {
// Verifica se a img já foi envolvida
if (!avatar.parentNode.classList.contains('avatar-wrappers')) {
// Cria um novo elemento div
var wrapper = document.createElement('div');
// Adiciona uma classe personalizada ao div recém-criado
wrapper.className = 'avatar-wrappers';
// Envolve a img.avatar no novo div
avatar.parentNode.insertBefore(wrapper, avatar);
wrapper.appendChild(avatar);
}
});
}
// Escuta o carregamento inicial da página
document.addEventListener('DOMContentLoaded', function() {
wrapAvatars();
// Usa MutationObserver para observar as mudanças no DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
wrapAvatars();
}
});
});
// Configura as opções do observador
var config = { childList: true, subtree: true };
// Começa a observar o elemento raiz do documento
observer.observe(document.body, config);
});
})();
</script>
<script type="text/javascript">
(function() {
function adjustWrapperSizes() {
// Obtém todas as tags div com a classe avatar-wrapper
var wrappers = document.querySelectorAll('div.avatar-wrapper');
// Define os valores de aumento de largura e altura
var widthIncrease = 9; // Por exemplo, aumenta 20px
var heightIncrease = 9; // Por exemplo, aumenta 20px
// Itera sobre cada div.avatar-wrapper
wrappers.forEach(function(wrapper) {
// Obtém o elemento img filho atual do div
var img = wrapper.querySelector('img');
if (img) {
// Obtém a largura e altura reais da img
var imgWidth = img.offsetWidth;
var imgHeight = img.offsetHeight;
// Calcula a nova largura e altura
var newWidth = imgWidth + widthIncrease;
var newHeight = imgHeight + heightIncrease;
// Define a largura e altura do div
wrapper.style.width = newWidth + 'px';
wrapper.style.height = newHeight + 'px';
}
});
}
// Garante que seja executado no carregamento inicial do DOM
document.addEventListener('DOMContentLoaded', function() {
adjustWrapperSizes();
// Usa MutationObserver para observar as mudanças no DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
adjustWrapperSizes();
}
});
});
// Configura as opções do observador
var config = { childList: true, subtree: true };
// Começa a observar o elemento raiz do documento
observer.observe(document.body, config);
});
})();
</script>
1 curtida