问题描述
说我有一个 p
元素或 div
元素有一个文字说约10-15行,现在我的客户对此有一个奇怪的呼叫,他需要奇/偶行具有不同的文字颜色。说行1 - 黑色,所以行2应该是灰色,行3应该是黑色等等...
Say I've a p
element or div
element having a text say about 10-15 lines, now my client has a weird call on this, he needs odd/even lines having different text color. Say Line 1 - Black, so Line 2 should be Grey, Line 3 should be again black and so on...
所以我决定使用span的改变颜色,变量分辨率在这里杀了事情,我知道:第一行
选择器(这将不是有用的在这种情况下),还选择像 :odd
& :even
将被排除在这里,因为不使用表,所以有任何方式我可以实现这使用CSS或者我需要使用jQuery?
So I decided using span's and changed the color but variable resolution is killing things here, Am aware of the :first-line
selector (Which won't be useful in this case), also selectors like :odd
& :even
will be ruled out here as am not using tables, so is there any way I can achieve this using CSS or do I need to use jQuery?
我需要一个CSS解决方案,如果没有,欢迎使用JavaScript
I need a CSS solution, if not, jQuery and JavaScript are welcome
推荐答案
演示1
,复合的事实,它的上午3:30。
Demo 1
A rather ugly little solution, compounded by the fact that it's 3:30 AM. Still, it works on plain text blocks and allows each line to be individually styled.
小提琴:
基本上它:
- 将来源分割成单个单词
- 将每个单词包裹在一个跨度(丑陋但有效 - 任何
- 使用简单的位置计算来确定元素是否低于上一个
- 根据索引变化更改颜色
- 对调整大小执行#3-5(这一定会受到限制。)
- Splits the source into individual words once
- Wraps each word in a span (ugly but effective-any style can now be applied to the span)
- Uses a simple position calculation to determine if the element is lower than the previous
- Changes colors based on index change
- Performs #3-5 on resize (this should definitely be throttled!)
$(".stripe").each(function(){
var obj = $(this);
var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
obj.html(html);
});
function highlight(){
var offset = 0;
var colorIndex = 0;
var colors = ["#eee","#000"];
var spans = $(".stripe span");
// note the direct DOM usage here (no jQuery) for performance
for(var i = 0; i < spans.length; i++){
var newOffset = spans[i].offsetTop;
if(newOffset !== offset){
colorIndex = colorIndex === 0 ? 1 : 0;
offset = newOffset;
}
spans[i].style.color = colors[colorIndex];
}
}
highlight();
$(window).on("resize", highlight);
演示2
:
- 使用较大的文字块
- 显示应用于多个元素的效果
- 缓存所有跨度选择器
- 添加resize限制
- Uses a larger block of text
- Shows effect applied to multiple elements
- Caches the "all spans" selector
- Adds resize throttling
(function () {
$(".stripe").each(function () {
var obj = $(this);
var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
obj.html(html);
});
var offset = 0;
var colorIndex = 0;
var colors = ["#ccc", "#000"];
var spans = $(".stripe span");
function highlight() {
for (var i = 0; i < spans.length; i++) {
var newOffset = spans[i].offsetTop;
if (newOffset !== offset) {
colorIndex = colorIndex === 0 ? 1 : 0;
offset = newOffset;
}
spans[i].style.color = colors[colorIndex];
}
}
highlight(); // initial highlighting
var timeout;
function throttle(){
window.clearTimeout(timeout);
timeout = window.setTimeout(highlight, 100);
}
$(window).on("resize", throttle);
})();
输出
Output
这篇关于如何定位交替的奇/偶文本行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!