HTML5 template模板元素实例页面
回到相关文章 »代码:
CSS代码:
template { display: block; height: 300px; background-color: #eee; }
HTML代码:
<template id="template"> <p>如果你看得见我和下面的图片,说明不支持template元素。</p> <p><img src="images/mm1.jpg"></p> </template> <div id="result" class="result"></div>
JS代码:
var template = document.getElementById("template"); var result = 'var template = document.getElementById("template");'; if (template) { if (template.innerHTML) { result += '<p>template元素可以通过选择器捕获。</p>'; if (template.childNodes.length) { result += '<p>template被当成了普通元素。</p>'; } else { result += '<p>template支持,且innerHTML是:<xmp>'+ template.innerHTML +'</xmp></p>'; var image = template.content.querySelectorAll("img")[0]; if (image) result += '通过template.content + querySelector(All)获取子元素'; } } else { result += '<p>template是未知元素。</p>'; } } else { result += '<p>template元素不存在。</p>'; } document.getElementById("result").innerHTML = result;
效果:
如果你看得见我和下面的图片,说明不支持template元素。