Detects the IMG tags of all user avatars and creates a div to wrap the IMG tags of all users Does anyone know how? I insert the div to the img tag of the user’s avatar, and then I can set the inserted div as the avatar frame

api.onPageChange(() => { // 查找所有具有 avatar 类的 img 元素 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); }); }); It’s like this, but the code doesn’t take effect

Hello :waving_hand: What you want to achieve exactly? Is this something that not possible with for example CSS pseudo element?

[image] I guess it works – Can you share how you use this code? However, we also have element changes in the same page. Therefore, I made some modifications to your code, which should meet the requirements: 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 // 递归观察子节点 });

Thank you very much for your reply, I’ve found a workaround, use JavaScript code to detect an img tag with an avatar class and create a div tag with an avatar-wrappers class to wrap it, so that all the user’s avatars are surrounded by a newly created div, and then use pseudo-class elements to add different avatar frames for members of different user groups via user group css. Then automatically adjust the height and width of the avatar frame by identifying the width and height of the user’s avatar through JavaScript. This implements the website global avatar frame. I’ve shared the JavaScript code below (function() { function wrapAvatars() { // 获取所有具有 avatar 类的 img 标签 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); } }); } // 监听页面初次加载 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); }); })(); (function() { function adjustWrapperSizes() { // 获取所有带有 avatar-wrapper 类的 div 标签 var wrappers = document.querySelectorAll('div.avatar-wrapper'); // 设置要增加的宽高值 var widthIncrease = 9; // 例如，增加 20px var heightIncrease = 9; // 例如，增加 20px // 遍历每个 div.avatar-wrapper wrappers.forEach(function(wrapper) { // 获取当前 div 的子 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); }); })(); [屏幕截图 2024-08-03 181537]

Insert a div into the specified html code to wrap it

Development

sheng_hualuo (花落晓斩神) August 3, 2024, 7:38am 4

Pseudo-class elements can be implemented but he needs to adjust the position of each avatar frame, and he can adapt to the avatar size without using pseudo-classes

Topic		Replies	Views
How to increase Discourse avatar resolution with JS? Product Support	10	3749	January 2, 2019
Avatars that are generated with divs Product Support	2	637	February 3, 2020
Replacing avatar & username for a specific post Development	9	841	August 29, 2024
How to add customer HTML after “post_1” (part2) Product Support	4	701	September 5, 2021
Avatars not showing on plugin Development	2	670	May 12, 2022

Insert a div into the specified html code to wrap it

Related topics