使用 JavaScript 选择特定文本行
我们如何设置特定文本行的样式，类似于 :first-line CSS 伪元素，而不将其限制为仅第一行？
虽然 CSS 不足以完成此任务，但 JavaScript 提供了
JavaScript 实现：
我们可以使用 JavaScript 将每个单词包装在一个 span 元素中：
$(function(){
var p = $('p');
var words = p.text().split(' ');
var text = '';
$.each(words, function(i, w){
if($.trim(w)) text = text + '<span>' + w + '</span> ' }
); //each word
p.html(text);
确定行号每个跨度，我们使用窗口的调整大小事件来计算每个跨度的垂直位置span:
$(window).resize(function(){
var line = 0;
var prevTop = -15;
$('span', p).each(function(){
var word = $(this);
var top = word.offset().top;
if(top!=prevTop){
prevTop=top;
line++;
}
word.attr('class', 'line' + line);
});//each
});//resize
突出显示偶数/奇数行：
要突出显示偶数/奇数行，代码可以简化为：
$(window).resize(function(){
$('span', p).each(function(){
var word = $(this);
var top = word.offset().top;
var line = Math.floor(top / 20);
word.attr('class', (line % 2 == 0 ? 'even' : 'odd'));
});//each
});//resize
注意事项：
这个方法假设单词不在同一行内换行，并且类中的更改可能会影响单词的大小或宽度。
示例：
[点击此处](https://jsbin.com/piwizateni/1/edit?html,css,js,output) 进行工作演示。
以上是JavaScript 如何像 CSS 的 `:first-line` 那样为任意行设置特定文本行的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！
