HTML5自定义元素
本帖最后由 马黑黑 于 2023-5-28 21:44 编辑 <br /><br /><style>.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>
<div class="papa">
<p>HTML5 允许自定义元素，我在做原生 CSS+HTML 时钟的时候，就是用了自定义元素，只是不够规范。HTML5规定，自定义元素的命名规则需要一个连接符号 - ，例如，my-box 是符合标准的，mybox 是非标准的，这种标准的制定得到绝大多数浏览器的支持，并完美解析。</p>
<p>自定义元素标签与 span 一样，属于行内标签，因此应根据需要决定是否设置display 属性。如果你想让它能像 div 一样的表现，则建议将其设置为 block 或 flex、grid 等等。试看以下例子：</p>
<div class="mama">
<pre class="hCode"><style>
my-circle {
margin: auto;
display: grid;
place-items: center;
width: 200px;
height: 200px;
font-size: 2em;
background: olive;
border-radius: 50%;
box-shadow: 0 0 6px gray;
text-shadow: 1px 1px 1px #000;
}
</style>
<my-circle>花潮</my-circle></pre>
<pre class="hLineNum"></pre>
</div>
<p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
<p>自定义元素和标准元素一样，可以拥有自己的 id 和 class 属性。下面给的例子，my-circle 标签有自己的 id 属性，JS 可以通过该属性识别并操纵 my-circle 元素：每一次单击运行后出现的 my-circle 元素，都会改变自定义元素的背景颜色。</p>
<div class="mama">
<pre class="hCode"><style>
my-circle {
margin: auto;
display: grid;
place-items: center;
width: 200px;
height: 200px;
font-size: 2em;
background: purple;
border-radius: 50%;
box-shadow: 0 0 6px gray;
text-shadow: 1px 1px 1px #000;
}
</style>
<my-circle id="mine">花潮</my-circle>
<script>
mine.onclick = () => mine.style.background = `#${Math.random().toString(16).substr(-6)}`;
</script></pre>
<pre class="hLineNum"></pre>
</div>
<p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
<p>自定义元素的主要作用是让元素的命名更具备语义化属性。</p>
</div>
<script>
let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');
hCodes.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(let i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 20}px`;
if(!btns) return;
btns.onclick = () => {
let val = btns.value;
val === '运行代码' ? codeRun(hCodes.innerText, stages) : codeRun('',stages);
btns.value = btns.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
};
});
let codeRun = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
</script>
先收藏了，回头再谢谢！问好，晚安！ 小文 发表于 2023-5-28 21:31
先收藏了，回头再谢谢！问好，晚安！
{:4_190:} “自定义元素的命名规则需要一个连接符号 - ，”自定义元素这么容易就可以啊。
不过还是更熟悉原本的那些元素{:4_173:} 学习一下这个真好，以后看到也不会蒙圈了。感谢黑黑的详细讲解{:4_187:} 问好老师！{:4_190:}现在是雾里看花！只能先收藏，慢慢学习领悟！ 亦是金 发表于 2023-5-28 22:13
问好老师！现在是雾里看花！只能先收藏，慢慢学习领悟！
你若懂得 <div></div> 这个也就能懂 醉美水芙蓉 发表于 2023-5-28 21:53
谢谢老师分享教程！
{:4_190:} 醉美水芙蓉 发表于 2023-5-28 21:55
要是能用代码制作水晶球就更漂亮了！
你把过去对应的水晶球CSS代码放到自定义的元素里头就行了 红影 发表于 2023-5-28 22:03
“自定义元素的命名规则需要一个连接符号 - ，”自定义元素这么容易就可以啊。
不过还是更熟悉原本的那些 ...
换个名称而已，只是命名有规定 马黑黑 发表于 2023-5-28 22:16
你若懂得这个也就能懂
我要慢慢悟！{:5_111:} 红影 发表于 2023-5-28 22:03
学习一下这个真好，以后看到也不会蒙圈了。感谢黑黑的详细讲解
遗憾的是不支持全中文命名{:4_170:} 醉美水芙蓉 发表于 2023-5-28 22:19
那个代码是FLASH，无法使用！
额 亦是金 发表于 2023-5-28 22:19
我要慢慢悟！
好的 马黑黑 发表于 2023-5-28 22:18
换个名称而已，只是命名有规定
嗯嗯，知道这个了挺好，不一定去用，却不会迷惑了。 马黑黑 发表于 2023-5-28 22:21
遗憾的是不支持全中文命名
可以用拼音啊。 我就当雾里看花也不错啊
页:
[1]
2