动态更改SPAN的内容 [英] Dynamically changing content of a SPAN

问题描述

如何在无限循环中动态更改< span> 标记的内容。

我试过使用下面的方法。是否可以用纯CSS动画做到这一点？如果无法使用纯CSS，请提出替代方法。

HTML：

 < p> Lorem ipsum< span>< / span>坐下。< / p> 
   

CSS ：

  span {
 content：''; 
 animation：flip 2s infinite; 
} 
 @keyframes flip {
 10％{
 content：'Example no1'; 
} 
 40％{
 content：''; 
} 
 80％{
 content：'Example no2'; 
} 
 100％{
 content：''; 
} 
} 
  

演示小提琴

解决方案

更改 span 动态使用 content 属性是不可能的。它最初设计为仅与伪元素（例如：之前或：之后）一起使用。

但是，这可以通过HTML和Javascript实现，如下所示：

  var i = 0; // counter variablevar arrayLength = 5; //数据数组的最大长度var dataArray = ['示例1'，'示例2'，'示例3'，'示例4'，'示例5']; //必须在循环函数中显示的实际数据changeval（）{if（i == arrayLength）i = 0; //如果计数器达到最大长度，重置它document.getElementById（'dataSpan'）。innerHTML = dataArray [i]; //将值设置为span i ++; // Increment counter} setInterval（changeval，500）; //调用函数以定义的间隔更改值 

  ;！ - 只需为您必须设置内容的span添加ID  - >< p> Lorem ipsum< span id ='dataSpan'>< / span> < / p> 
 

---

虽然CSS不是最适合你的情况，下面可以实现使用几个CSS技巧/黑客如果没有。

  body，html {font-size：16px;}＃dataSpan {身高：1.25em; overflow：hidden; display：inline-block; vertical-align：top; padding：0px; line-height：1.25em; top：0;}＃dataSpan span {position：relative; -webkit-animation：changeContent 5s steps（4）infinite; -moz-animation：changeContent 5s steps（4）infinite;动画：changeContent 5s steps（4）infinite;} @  -  webkit-keyframes changeContent {从{top：0;}到{top：-5em}}  -  moz-keyframes changeContent {from {top：0;} to { top：-5em;}} @ keyframes changeContent {from {top：0;} to {top：-5em;}}  

 < p> Lorem ipsum< span id =dataSpan> < span>实施例1< br>实施例2< br>实施例3< br>实施例4< br>实施例5< / span> < / p> 
 

How can I dynamically change the content of a <span> tag in an infinite loop.

I have tried using the below method. Is it possible to do this with pure CSS animations? If it is not possible with pure CSS, please suggest an alternate method.

HTML:

<p>Lorem ipsum <span></span> sit amet.</p>

CSS:

span {
    content: '';
    animation: flip 2s infinite;
}
@keyframes flip {
    10% {
        content: 'Example no1';
    }
    40% {
        content: '';
    }
    80% {
        content: 'Example no2';
    }
    100% {
        content: '';
    }
}

Demo Fiddle

解决方案

Changing the content of a span dynamically using the content property is not possible. It was originally designed to be used only with pseudo-elements (like :before or :after).

However, this can be achieved with just HTML and Javascript like shown below:

var i = 0; // The counter variable
var arrayLength = 5; // The max length of the data array 
var dataArray = ['Example 1', 'Example 2', 'Example 3', 'Example 4', 'Example 5']; // The actual data which have to be shown in a loop

function changeval() {
    if (i == arrayLength) i = 0; // If counter reaches max length, reset it
    document.getElementById('dataSpan').innerHTML = dataArray[i]; // Set the value to the span
    i++; // Increment counter
}

setInterval(changeval, 500); // Call the function to change value at defined intervals

<!-- Just add an ID to your span to which the content must be set -->
<p>Lorem ipsum <span id='dataSpan'></span> sit amet.</p>

---

Though CSS isn't the best for your case, the below can be achieved using a few CSS tricks/hacks if the no. of items in your array is small/finite.

body, html{
    font-size: 16px;
}
#dataSpan {
    height: 1.25em;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    line-height: 1.25em;
    top:0;
}
#dataSpan span {
    position: relative;
    -webkit-animation: changeContent 5s steps(4) infinite;
    -moz-animation: changeContent 5s steps(4) infinite;
    animation: changeContent 5s steps(4) infinite;
}
@-webkit-keyframes changeContent {
    from{top:0;}
    to {top:-5em;}
}
@-moz-keyframes changeContent {
    from{top:0;}
    to {top:-5em;}
}
@keyframes changeContent {
    from{top:0;}
    to {top:-5em;}
}

<p>Lorem ipsum <span id="dataSpan">
        <span>Example 1<br>Example 2<br>Example 3<br>Example 4<br>Example 5</span>
</span> sit amet.</p>

这篇关于动态更改SPAN的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！