Fatal编程技术网
  • javascript/
  • Javascript 使用CSS设置跨距中第n个字母的样式

Javascript 使用CSS设置跨距中第n个字母的样式

javascript css

Javascript 使用CSS设置跨距中第n个字母的样式,javascript,css,styling,pseudo-class,Javascript,Css,Styling,Pseudo Class,我有： 我知道我可以使用javascript解析字符串，用周围的span标记替换字母，并设置标记样式。但是，字符串每秒钟都会更新一次，而且解析似乎常常需要大量的资源。使用javascript和jQuery进行解析可能是一种冗长的方法，但这里有一个可能的解决方案 将h、m和s与原始字符串分开 <span id="string">12h12m12s</span> 这是一本书 性能方面，我建议使用spanhell #string{font-size:1.2em} #strin

我有：

我知道我可以使用javascript解析字符串，用周围的
span
标记替换字母，并设置标记样式。但是，字符串每秒钟都会更新一次，而且解析似乎常常需要大量的资源。

使用javascript和jQuery进行解析可能是一种冗长的方法，但这里有一个可能的解决方案

将
h
、
m
和
s
与原始字符串分开

<span id="string">12h12m12s</span>
这是一本书

性能方面，我建议使用
span
hell

#string{font-size:1.2em}
#string > span{font-size:0.8em}

这说明了缓存选择器的基本思想。通过不重新创建元素，您还可以获得良好的性能提升

尽管如此，对于如此简单的事情来说，一秒钟一次并不是很繁重的工作（除非你的页面中有数百个时钟）。

这只会将字母按跨距排列，并给它们提供相同的类。也许值得一提lol:-）

JavaScript:

//cache number container element references
var h = document.getElementById('h'),
    m = document.getElementById('m'),
    s = document.getElementById('s'),
    //IE feature detection
    textProp = h.textContent !== undefined ? 'textContent' : 'innerText';

function tick() {
    var date = new Date(),
        hours = date.getHours(),
        mins = date.getMinutes(),
        secs = date.getSeconds();
    h[textProp] = hours < 10 ? '0'+hours : hours;
    m[textProp] = mins < 10 ? '0'+mins : mins;
    s[textProp] = secs < 10 ? '0'+secs : secs;
}
tick();
setInterval(tick, 1000);
使用CSS的简单解决方案，并使用span标记包装每个字符：

.smaller {
    font-size: 10px;
}

#文本跨度：第n个子项（2）{
颜色：#ff00ff；
}
#文本跨度：第n个子项（5）{
颜色：#00ffff；
}
#正文{
字体大小：20px；
}
你好
因为这样的东西根本不存在。您可能已经从一个建议其实现的博客上读到了它-请参阅并向下滚动至“：：nth-letter（）/：：last-letter（）/：：nth-last-letter（）”-是的，您可以通过JS轻松实现这一点。@Fabriciomatté，我有一种感觉。。。你能推荐另一种方法吗（我假设是js）它足够高效，可以每秒运行一次吗？也许我用JavaScript创建了一个时钟，它使用span元素来包含小时、分钟、秒。如果给这些span元素中的每个元素一个唯一的id属性，就可以简单地使用JavaScript来定位和更新该元素的内容。性能非常好，您可以使用CSS为每个组件设置不同的样式。我的意思是，在循环之前：
var seconds=document.getElementById（'seconds'）
然后在循环中使用
seconds
而不是
document.getElementById（'seconds'）
。这里有一篇更详细的文章：这是对答案最有趣的介绍实际上，您可以删除整个for循环，并将最后一行替换为：str.innerHTML=str.innerHTML.replace（/（[hms]）/gi，$1'）；然后css变为：*#字符串span{font size:10px}如果要单独设置样式，请分别使用此css:*#字符串span:n，类型为（n）{…css…}，其中n是跨度的序号，而…css。。。每一个都是你想要的css 
//cache number container element references
var h = document.getElementById('h'),
    m = document.getElementById('m'),
    s = document.getElementById('s'),
    //IE feature detection
    textProp = h.textContent !== undefined ? 'textContent' : 'innerText';

function tick() {
    var date = new Date(),
        hours = date.getHours(),
        mins = date.getMinutes(),
        secs = date.getSeconds();
    h[textProp] = hours < 10 ? '0'+hours : hours;
    m[textProp] = mins < 10 ? '0'+mins : mins;
    s[textProp] = secs < 10 ? '0'+secs : secs;
}
tick();
setInterval(tick, 1000);

var str = document.getElementById('string'),
    chars = str.innerHTML.split('');

for (var i = 0; i < chars.length; i++) {
    if (chars[i].match(/[hms]/)) {
        chars[i] = "<span class='smaller'>" + chars[i] + "</span>";
    }
}
str.innerHTML = chars.join(''); 

<body>
    <span id="string">12h12m12s</span>        
</body>

.smaller {
    font-size: 10px;
}

#text span:nth-child(2) {
  color: #ff00ff;
}

#text span:nth-child(5) {
  color: #00ffff;
}

#text {
  font-size: 20px;
}

<span id="text"><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></span>