如何使用 JavaScript 和 CSS 有选择地设置特定文本行的样式？

使用 CSS 和 JavaScript 选择特定文本行并设置其样式

问题：

如何有选择地定位和样式化文本行文档中的特定文本行？ :first-line CSS 伪元素允许您定位第一行，但是有没有办法选择任意行？

JavaScript 解决方案：

Since CSS单独无法实现这一点，需要 JavaScript 解决方案。考虑以下方法：

$(function() {
  var p = $('p');
  var words = p.text().split(' '), text = '', line = 0;
  $.each(words, function(i, w) {
    if ($.trim(w)) text += '<span>' + w + '</span> ';
  });
  p.html(text);
  $(window).resize(() => {
    var prevTop = -15;
    $('span', p).each(function() {
      var top = $(this).offset().top;
      if (top !== prevTop) { prevTop = top; line++; }
      $(this).attr('class', 'line' + line);
    });
  });
  $(window).resize();
});

解释：

此解决方案动态地将每个单词包装在一个 span 元素中，并根据其为每个 span 分配一个线类。位置。调整窗口大小时，脚本会调整线条类以确保正确识别每条线。

如何使用：

1. 包含 jQuery 库。
2. 将文本包装在带有 ID 或类的段落元素中以供选择。
3. 添加为您的页面提供了脚本。
4. 调整窗口大小以查看应用于每个跨度元素的线类。

附加说明：

• 调整特定行选择的逻辑，例如只选择偶数或奇数行。
• 考虑类改变字大小或宽度的潜在问题。
• 检查提供的 JSBin 演示以获取工作示例。

以上是如何使用 JavaScript 和 CSS 有选择地设置特定文本行的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！