ユーザーアバターのすべてのIMGタグを検出し、すべてのユーザーのIMGタグをラップするdivを作成します。
どなたかご存知ですか？ユーザーアバターのimgタグにdivを挿入し、挿入した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コードを使用して、アバタークラスを持つimgタグを検出し、アバターラッパークラスを持つ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