MCBBS Wiki欢迎您共同参与编辑！在参与编辑之前请先阅读Wiki方针。
如果在编辑的过程中遇到了什么问题，可以去讨论板提问。
为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户，请尽快绑定/验证。
MCBBS Wiki GitHub群组已上线！
您可以在回声洞中发表吐槽！
服务器状态监控。点击进入
本站由MCBBS用户自行搭建，与MCBBS及东银河系漫游指南（北京）科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>
微件:SaltInPageCSSLoader：修订间差异
跳到导航
跳到搜索
Salt lovely（留言 | 贡献） 小 （.） |
Salt lovely（留言 | 贡献） 小 （CSS去重） |
||
| 第1行： | 第1行： | ||
<noinclude> | <noinclude> | ||
<pre><div | <pre><div id="test" class="salt InPageCSSLoader"><pre> | ||
h1{ | h1{ | ||
color: royalblue; | color: royalblue; | ||
| 第7行： | 第7行： | ||
</pre></div> | </pre></div> | ||
{{#Widget:SaltInPageCSSLoader}}</pre> | {{#Widget:SaltInPageCSSLoader}}</pre> | ||
<div | <div id="test" class="salt InPageCSSLoader"><pre> | ||
h1{ | h1{ | ||
color: royalblue; | color: royalblue; | ||
| 第32行： | 第32行： | ||
let toolbar = el.querySelector('.toolbar') // Prism处理 | let toolbar = el.querySelector('.toolbar') // Prism处理 | ||
if (toolbar) { toolbar.remove() } // Prism处理 | if (toolbar) { toolbar.remove() } // Prism处理 | ||
// 根据id查重（MW不支持id、class之外其他可以存放字符串的属性） | |||
if (el.hasAttribute('id')) | |||
if (document.querySelector( 'style#' + (el.getAttribute('id') || ''))) { | |||
el.removeAttribute('id') | |||
console.log('[SaltInPageCSSLoader]检测到重复CSS' + (el.getAttribute('id') || ''));continue | |||
} | |||
// 内容简单处理 | // 内容简单处理 | ||
let text = (el.textContent || '').replace(/^\n+|\n+$/gm, '') // 去除首尾的空行 | let text = (el.textContent || '').replace(/^\n+|\n+$/gm, '') // 去除首尾的空行 | ||
el.textContent = text | // el.textContent = text | ||
let handler = () => { | let handler = () => { | ||
// 处理这个元素 | // 处理这个元素 | ||
| 第58行： | 第64行： | ||
handler() | handler() | ||
} else { // 页面编写者模式 | } else { // 页面编写者模式 | ||
el.textContent = text | |||
highlightEl(el, '点击应用CSS(页面编写完毕后CSS将默认启用)') | highlightEl(el, '点击应用CSS(页面编写完毕后CSS将默认启用)') | ||
el.addEventListener('click', handler) | el.addEventListener('click', handler) | ||
} | } | ||
el.style.whiteSpace = 'pre' | |||
} | } | ||
/**滤出数组中所有HTMLElement */ | /**滤出数组中所有HTMLElement */ | ||
2021年5月3日 (一) 14:48的版本
<div id="test" class="salt InPageCSSLoader"><pre>
h1{
color: royalblue;
background-color: #f0f6ff;
}
</pre></div>
{{#Widget:SaltInPageCSSLoader}}
h1{
color: royalblue;
background-color: #f0f6ff;
}
这个页面的标题（<h1>）变成了蓝字蓝底。