实例
使用 <template> 保留页面加载时隐藏的内容。使用 JavaScript 来显示:
<button onclick="showContent()">显示被隐藏的内容</button> <template> <h2>Flower</h2> <img src="img_white_flower.jpg" width="214" height="204"> </template> <script> function showContent() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script>
定义和用法
<template> 标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。
<template> 中的内容可以稍后使用 JavaScript 呈现。
如果您有一些需要重复使用的 HTML 代码,则可以使用 <template> 标记。如果在没有 <template> 标记的情况下执行此操作,必须使用 JavaScript 创建 HTML 代码,以防止浏览器呈现这些代码。
全局属性
<template> 标签同时支持 HTML 中的全局属性。
实例
对数组中的每个项,都使用一个新的 div 元素来填充网页。每个 div 元素的 HTML 代码都在 template 元素内:
<template> <div class="myClass">我喜欢:</div> </template> <script> var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"]; function showContent() { var temp, item, a, i; temp = document.getElementsByTagName("template")[0]; item = temp.content.querySelector("div"); for (i = 0; i < myArr.length; i++) { a = document.importNode(item, true); a.textContent += myArr[i]; document.body.appendChild(a); } } </script>
实例
检查 <template> 的浏览器支持:
<script> if (document.createElement("template").content) { document.write("Your browser supports template!"); } else { document.write("您的浏览器不支持 template!"); } </script>
1、本站所有资源来源于用户上传和网络,版权争议与本站无关,版权归原创者所有,如有侵权请邮件联系我们!
2、分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3、不得使用于非法商业用途,商用请购买正版,不得违反国家法律。否则后果自负!
4、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5、如有链接无法下载、失效或广告,请联系管理员处理!
6、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
2、分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3、不得使用于非法商业用途,商用请购买正版,不得违反国家法律。否则后果自负!
4、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5、如有链接无法下载、失效或广告,请联系管理员处理!
6、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7、不保证所有资源都完整可用,不排除存在加密、BUG、需要授权或者残缺的可能,由于资源的特殊性,下载后一律不予退货!
8、本文来自炫客网搜集整理,如有侵权请联系管理员删除,转载请注明出处:https://www.xuankewang.com/4027.html