检测所有用户头像的 IMG 标签，并创建一个 div 来包裹所有用户的 IMG 标签
有人知道怎么做吗？我将 div 插入到用户头像的 img 标签中，然后就可以将插入的 div 设置为头像框
<script type="text/discourse-plugin" version="0.8">
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);
});
});
</script>
它就像这样，但代码不起作用
你好 
你具体想实现什么？这是否是 CSS 伪元素无法实现的功能？
2 个赞
伪类元素可以实现，但他需要调整每个头像框的位置，并且他可以在不使用伪类的情况下适应头像大小
我猜它能用——你能分享一下你是如何使用这段代码的吗？
但是，我们页面上的元素也有变化。因此，我对你的代码做了一些修改，应该能满足要求：
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 // 递归观察子节点
});
1 个赞
非常感谢您的回复，我找到了一个解决方法：使用 JavaScript 代码检测带有 avatar 类的 img 标签，并创建一个带有 avatar-wrappers 类的 div 标签来包裹它，这样所有用户的头像都会被新创建的 div 包围，然后使用伪类元素通过用户组 CSS 为不同用户组的成员添加不同的头像框。之后，通过 JavaScript 识别用户头像的宽度和高度来自动调整头像框的尺寸。这样就实现了网站全局的头像框。
我已在下方分享了 JavaScript 代码：
<script type="text/javascript">
(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);
});
})();
</script>
<script type="text/javascript">
(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);
});
})();
</script>
1 个赞