我做了一个自定义属性，我希望当开头检测到 tags::开头就自动添加我设置的那个自定义属性
相关帖子
被采纳的回答
-
onemo •付费者
css + js 试试
[data-type="NodeParagraph"].custom { border: 1px solid #FFFFFF; box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0; box-sizing: border-box; padding: 10px; border-radius: 10px; margin: 0px 0px 20px 0px; }function applyTagClass() { var paragraphs = document.querySelectorAll('[data-type="NodeParagraph"]'); paragraphs.forEach(function(para) { var editableDiv = para.querySelector('[contenteditable="true"]'); if (editableDiv && editableDiv.textContent.trim().startsWith('tags::')) { para.classList.add('custom'); } else { para.classList.remove('custom'); } }); } document.addEventListener('DOMContentLoaded', applyTagClass); var observer = new MutationObserver(applyTagClass); observer.observe(document.body, { childList: true, subtree: true });
请输入回帖内容
...
-
优化以后是这样的
// 定义一个函数，用于根据特定条件给段落添加或移除CSS类 function applyTagClass() { // 缓存查询结果，避免每次调用函数都进行查询 var paragraphs = document.querySelectorAll('[data-type="NodeParagraph"]'); paragraphs.forEach(function(para) { var editableDiv = para.querySelector('[contenteditable="true"]'); if (editableDiv && editableDiv.textContent.trim().startsWith('tags::')) { para.classList.add('custom'); } else { para.classList.remove('custom'); } }); } // 使用事件委托，只在document.body上设置一个事件监听器 document.body.addEventListener('DOMNodeInserted', applyTagClass, true); // 创建一个MutationObserver对象，用于监听DOM的变化 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { mutation.addedNodes.forEach(function(node) { // 检查是否是段落节点或者其子节点 if (node.nodeType === 1 && node.matches('[data-type="NodeParagraph"]')) { applyTagClass(); } }); }); }); // 配置MutationObserver选项，只监听子节点的添加 observer.observe(document.body, { childList: true, subtree: true }); // 当文档加载完成时，执行applyTagClass函数 document.addEventListener('DOMContentLoaded', applyTagClass);1 回复 - 其他回帖
-
-
css + js 试试
[data-type="NodeParagraph"].custom { border: 1px solid #FFFFFF; box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0; box-sizing: border-box; padding: 10px; border-radius: 10px; margin: 0px 0px 20px 0px; }function applyTagClass() { var paragraphs = document.querySelectorAll('[data-type="NodeParagraph"]'); paragraphs.forEach(function(para) { var editableDiv = para.querySelector('[contenteditable="true"]'); if (editableDiv && editableDiv.textContent.trim().startsWith('tags::')) { para.classList.add('custom'); } else { para.classList.remove('custom'); } }); } document.addEventListener('DOMContentLoaded', applyTagClass); var observer = new MutationObserver(applyTagClass); observer.observe(document.body, { childList: true, subtree: true });1 回复 -
- 查看全部回帖
