突出顯示動態生成的文本

我正在創建一個頁面來顯示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

突出顯示動態生成的文本

回答

相關問題