Détecte les balises IMG de tous les avatars d’utilisateurs et crée une div pour envelopper les balises IMG de tous les utilisateurs
Quelqu’un sait comment faire ? J’insère la div dans la balise img de l’avatar de l’utilisateur, puis je peux définir la div insérée comme cadre de l’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 effectBonjour 
Qu’est-ce que vous voulez réaliser exactement ? Est-ce quelque chose qui n’est pas possible avec, par exemple, un pseudo-élément CSS ?
Les éléments de pseudo-classe peuvent être implémentés mais il doit ajuster la position de chaque cadre d’avatar, et il peut s’adapter à la taille de l’avatar sans utiliser de pseudo-classes.
Je suppose que ça fonctionne – Pouvez-vous partager comment vous utilisez ce code ?
Cependant, nous avons également des changements d’éléments sur la même page. Par conséquent, j’ai apporté quelques modifications à votre code, qui devraient répondre aux exigences :
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 // 递归观察子节点
});
Merci beaucoup pour votre réponse, j’ai trouvé une solution de contournement : utiliser du code JavaScript pour détecter une balise img avec une classe avatar et créer une balise div avec une classe avatar-wrappers pour l’encapsuler, de sorte que tous les avatars de l’utilisateur soient entourés d’un div nouvellement créé, puis utiliser des éléments de pseudo-classe pour ajouter différents cadres d’avatar pour les membres de différents groupes d’utilisateurs via le CSS du groupe d’utilisateurs. Ensuite, ajustez automatiquement la hauteur et la largeur du cadre d’avatar en identifiant la largeur et la hauteur de l’avatar de l’utilisateur via JavaScript. Cela implémente le cadre d’avatar global du site Web.
J’ai partagé le code JavaScript ci-dessous
<script type="text/javascript">
(function() {
function wrapAvatars() {
// Obtenir toutes les balises img avec la classe avatar
var avatars = document.querySelectorAll('img.avatar');
// Parcourir chaque img.avatar
avatars.forEach(function(avatar) {
// Vérifier si l'img est déjà encapsulé
if (!avatar.parentNode.classList.contains('avatar-wrappers')) {
// Créer un nouvel élément div
var wrapper = document.createElement('div');
// Ajouter une classe personnalisée au nouvel élément div créé
wrapper.className = 'avatar-wrappers';
// Encapsuler l'img.avatar dans le nouveau div
avatar.parentNode.insertBefore(wrapper, avatar);
wrapper.appendChild(avatar);
}
});
}
// Écouter le chargement initial de la page
document.addEventListener('DOMContentLoaded', function() {
wrapAvatars();
// Utiliser MutationObserver pour écouter les changements dans le DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
wrapAvatars();
}
});
});
// Configurer les options de l'observateur
var config = { childList: true, subtree: true };
// Commencer à observer l'élément racine du document
observer.observe(document.body, config);
});
})();
</script>
<script type="text/javascript">
(function() {
function adjustWrapperSizes() {
// Obtenir tous les div avec la classe avatar-wrapper
var wrappers = document.querySelectorAll('div.avatar-wrapper');
// Définir les valeurs d'augmentation de la largeur et de la hauteur
var widthIncrease = 9; // Par exemple, augmenter de 20px
var heightIncrease = 9; // Par exemple, augmenter de 20px
// Parcourir chaque div.avatar-wrapper
wrappers.forEach(function(wrapper) {
// Obtenir l'élément img enfant du div actuel
var img = wrapper.querySelector('img');
if (img) {
// Obtenir la largeur et la hauteur réelles de l'img
var imgWidth = img.offsetWidth;
var imgHeight = img.offsetHeight;
// Calculer la nouvelle largeur et hauteur
var newWidth = imgWidth + widthIncrease;
var newHeight = imgHeight + heightIncrease;
// Définir la largeur et la hauteur du div
wrapper.style.width = newWidth + 'px';
wrapper.style.height = newHeight + 'px';
}
});
}
// S'assurer que l'exécution se fait lors du chargement initial du contenu du DOM
document.addEventListener('DOMContentLoaded', function() {
adjustWrapperSizes();
// Utiliser MutationObserver pour écouter les changements dans le DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
adjustWrapperSizes();
}
});
});
// Configurer les options de l'observateur
var config = { childList: true, subtree: true };
// Commencer à observer l'élément racine du document
observer.observe(document.body, config);
});
})();
</script>
