文章/答案/技术大牛

发布

问用于重复元素的HTML模板
EN

Stack Overflow用户

提问于 2013-04-05 06:43:08

回答 3查看 2K关注 0票数 3

我有以下代码：

    <div class="spinner">
        <div style="-webkit-animation-delay:0.24s; border-color: #777;"></div>
        <div style="-webkit-animation-delay:0.20s; border-color: #888;"></div>
        <div style="-webkit-animation-delay:0.16s; border-color: #999;"></div>
        <div style="-webkit-animation-delay:0.12s; border-color: #AAA;"></div>
        <div style="-webkit-animation-delay:0.08s; border-color: #BBB;"></div>
        <div style="-webkit-animation-delay:0.04s; border-color: #CCC;"></div>
        <div style="-webkit-animation-delay:0.00s; border-color: #DDD;"></div>
    </div>

这与一些CSS一起构成了一个动画微调器。

然而，它相当混乱，特别是如果我想多次使用它的话。我可以使用Javascript来创建它，但这也有点混乱，我的意思是，不应该将结构保留为HTML吗？有没有一种方法可以这样做：

<template name="spinner">
    <div class="spinner">
        <div style="-webkit-animation-delay:0.24s; border-color: #777;"></div>
        <div style="-webkit-animation-delay:0.20s; border-color: #888;"></div>
        <div style="-webkit-animation-delay:0.16s; border-color: #999;"></div>
        <div style="-webkit-animation-delay:0.12s; border-color: #AAA;"></div>
        <div style="-webkit-animation-delay:0.08s; border-color: #BBB;"></div>
        <div style="-webkit-animation-delay:0.04s; border-color: #CCC;"></div>
        <div style="-webkit-animation-delay:0.00s; border-color: #DDD;"></div>
    </div>
</template>
<body>
    <template target="spinner" />
    <!-- Some other stuff -->
    <template target="spinner" />
</body>

(不使用javascript)

html

css

回答 3

Stack Overflow用户

发布于 2013-04-05 06:49:53

你只能整理你的CSS；

CSS

.spinner div {
    /* markup for all divs in here, like width, height etc. */
}

.spinner div:nth-child(1) { -webkit-animation-delay:0.24s; border-color: #777; }
.spinner div:nth-child(2) { -webkit-animation-delay:0.20s; border-color: #888; }
.spinner div:nth-child(3) { -webkit-animation-delay:0.16s; border-color: #999; }
.spinner div:nth-child(4) { -webkit-animation-delay:0.12s; border-color: #AAA; }
.spinner div:nth-child(5) { -webkit-animation-delay:0.08s; border-color: #BBB; }
.spinner div:nth-child(6) { -webkit-animation-delay:0.04s; border-color: #CCC; }
.spinner div:nth-child(7) { -webkit-animation-delay:0.00s; border-color: #DDD; }

HTML

<div class="spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

HTML可以在任何地方重复。CSS不能重复内部的div-tag。你必须做一个小的JavaScript innerHTML循环来实现这一点。但是，为了避免这种情况，我将把它作为唯一的(我知道的)示例。

票数 2

Stack Overflow用户

发布于 2013-04-05 06:51:57

不，没有JavaScript是无法做到这一点的。HTML5有一个闪亮的新

票数 2

Stack Overflow用户

发布于 2013-04-05 06:48:33

除非您使用服务器端脚本生成超文本标记语言，否则超文本标记语言本身就是static。如果你想改变DOM，那么你需要使用Javascript。

你能做的就是把你的模板放在一个带有特定id的隐藏的div中，然后使用Javascript通过getElementById获取它，然后克隆这个div，并把它放在你想放的任何地方，放多少次。

如果您在Javascript上为此编写了一个函数，那么您可以在HTML之间放置简单的标记：

<script type="text/javascript">place_div()</script>

HTH

弗朗西斯科

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15822996

复制

相似问题

问用于重复元素的HTML模板
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于重复元素的HTML模板EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于重复元素的HTML模板
EN