详解HTML5中的template标签

发布时间：2020-03-15 21:40:47 所属栏目：MySql教程来源：站长网

导读：副标题#e# 一、HTML5 template元素初面 template元素，基本上可以确定是2013年才出现的。干嘛用的呢，顾名思意，就是用来声明是模板元素。目前，我们在HTML中嵌入模板HTML，往往是类似这样的写法： XML/HTML Code复制内容到剪贴板 scripttype=text/templat

如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如Chrome:

2015619175843048.png (545×598)

也就是说，虽然从CSS的角度看，<template>就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。

默认情况下，<template>是隐藏的，实际是默认其display属性为none. 使用下面的代码一测便知：

window.getComputedStyle(template).display; // 结果是"none"

2015619175903356.png (321×99)

因此，demo中才设置了如下的CSS声明：

CSS Code复制内容到剪贴板

template { display: block; ... }

模板的克隆
如果你是在HTML字符串上处理，类似于现在流行的MVC框架或模板技术，则template.innerHTML足矣。然，<template>比<script>强大之处在于，<script>内部内容只能当做字符串来获取，而<template>虽然存在于异空间，但是，依然可以节点获取（上面有展示），以及完整克隆，语法类似下面：

CSS Code复制内容到剪贴板

var clone = document.importNode(template.content, true);

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2/4

首页

尾页