举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > <template> 标签

<template> 标签

2023-05-13 21:31 HTML参考手册

 <template> 标签

实例

使用 <template> 标签在页面加载时该标签中的内容不会显示,加载后可以使用 JavaScript 来显示它:

<button onclick="showContent()">显示隐藏内容</button>

 

<template>

  <h2>logo</h2>

  <img decoding="async" src="https://atts..cn/attachments/image/20221207/1670380025475113.png" >

</template>

 

<script>

function showContent() {

  var temp = document.getElementsByTagName("template")[0];

  var clon = temp.content.cloneNode(true);

  document.body.appendChild(clon);

}

</script>




浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 <template> 标签。


标签定义及使用说明

<template> 标签定义在页面加载时隐藏的一些内容,该标签中的内容可以稍后使用 JavaScript 呈现。

如果您有一些需要重复使用的 HTML 代码,则可以使用 <template> 设置为公用的模板。


更多实例

实例

实例中的每个数组元素都使用一个新的 div 元素来填充网页。每个 div 元素的 HTML 代码都在 template 元素内::

<template>

  <div class="myClass">我喜欢: </div>

</template>

 

<script>

var myArr = ["Google", "W3cschool", "Taobao", "Wiki", "Zhihu", "Baidu"];

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 标签:

if (document.createElement("template").content) {

  document.write("您的浏览器支持 template 标签!");

} else {

  document.write("您的浏览器不支持 template 标签!");

}




全局属性

<time> 标签支持 HTML 的全局属性。


阅读全文
以上是鳄鱼CMS为你收集整理的 <template> 标签全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们