突出显示动态生成的文本

我正在创建一个页面来显示pdf，我使用Mozilla的pdf.js项目来渲染pdf。突出显示动态生成的文本

pdf.js在canvas标签下制作了多个呈现文本的动态div。我想强调一下我的pdf文本。以下是pdf.js动态生成的代码：

<div id="pageContainer1" class="page" style="width: 741.8181818181818px; height: 959.9999999999999px; " data-loaded="true"> 
<canvas id="page1" width="741" height="959"></canvas> 
<div class="textLayer"> 
<div data-canvas-width="300.69542660606743" data-font-name="Times" style="font-size:12.06334818181817px; left: 173.1905882352941px; top: 8.593899292929294px; -webkit-transform: scale(0.9002857084013994, 1); -webkit-transform-origin-x: 0%; -webkit-transform-origin-y: 0%; " dir="ltr" data-text-length="58">Boston&nbsp;University&nbsp;Computer&nbsp;Science&nbsp;Technical&nbsp;Report&nbsp;No.&nbsp;20</div> 
</div> 
</div>

任何一个可以给我提供了一种突出显示上面的代码与Java语言（如果可能的话）的文本？

来源

2012-03-30 hiteshtr

鉴于<div class="textLayer">...</div>仅适用于动态生成的文本的容器，和结构保持不变，你可以这样做：

var dynElems = document.getElementsByClassName('textLayer'); 
for (var i=0; i<dynElems.length; i++) { 
    dynElems[i].className += " highlight"; 
}

注意，这可能是更简单的使用jQuery：

$('.textLayer').addClass('highlight');

然后，您需要根据需要添加高亮类的定义，例如

.textLayer.highlight>div { 
    background-color: #EFEFEF; 
}

这就是说，你可以跳过JS完全位，只是这种风格添加到标题：

.textLayer>div { 
    background-color: #EFEFEF; 
}

来源

2012-03-30 12:55:27 Shagglez

我不希望所有的文字加以强调，并与类textLayer股利存在于pageContainer ，有像pageContainer2等多个页面容器..等 – hiteshtr 2012-03-31 04:18:04

我用这样的代码来访问特定的文本层，但不起作用： var dynElems = document.getElementById（“page1”）。getElementsByClassName（'textLayer'） ; – hiteshtr 2012-03-31 04:18:53

@hiteshtr该代码没有问题，它应该工作得很好。检查你的标记，看看是否有一个id =“page1”的元素，它包含了class =“textLayer”“ – Shagglez 2012-03-31 11:33:50

突出显示动态生成的文本

回答

相关问题