10

我有：

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

我希望使h,m和s小于文本的其余部分。我听说过nth-lettercss 中的伪元素，但它似乎不起作用：

#string:nth-letter(3),
#string:nth-letter(6),
#string:nth-letter(9) {
    font-size: 2em;
}

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

4

4 回答 4

8

性能方面，我推荐span地狱。

<span id="string"><span id="h">12</span><span class="h">h</span><span id="m">12</span><span class="m">m</span><span id="s">12</span><span class="s">s</span></span>

每个h,m和s字母都有一个跨度，以便您可以正确设置它们的样式（可以为每个应用相同或不同的样式）。

每个数字的另一个跨度，以便您可以缓存参考。总之，这是一个非常简单的本地时钟的 JS：

//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);

小提琴

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

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

于 2013-04-14T00:37:27.200 回答
3

这可能是使用 javascript 和 jQuery 执行此操作的冗长方式，但这里有一个可能的解决方案。

h将, m&s与原始字符串分开。

string = $('#string').text();

hD = string.substr(0,2)
h = "<span>"+string.substr(2,1)+"</span>";
mD = string.substr(3,2)
m = "<span>"+string.substr(5,1)+"</span>";
sD = string.substr(6,2)
s = "<span>"+string.substr(8,1)+"</span>";

finalString = hD + h + mD + m + sD + s;

$('#string').html(finalString);

然后，您可以#string使用 CSS 设置跨度的样式。

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

这是显示上述内容的演示小提琴。

于 2013-04-14T00:23:28.890 回答
3

这只会将字母扔到跨度中并为它们提供相同的类。也许值得一提，哈哈 :-)

jsFiddle

JavaScript：

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('');

HTML：

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

CSS：

.smaller {
    font-size: 10px;
}
于 2013-04-14T01:05:20.407 回答
1

使用 CSS 的简单解决方案并用跨度标签包装每个字符：

#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>

https://jsfiddle.net/f8vffLj0/

于 2016-10-21T08:36:23.983 回答