如何更改html文本任意部分的樣式
[英]How to change style of a arbitrary part of html text
問題描述
我想在任意位置以任意長度更改部分文字的樣式。 例如，我在HTML中有這個
<span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span>
給定變量start和length ，它可能是我不知道的任何有效值，我應該更改特定文本的顏色。
我該如何完成這項任務？
4 個解決方案
解決方案1
1 已采納 2015-06-16 11:54:27
嘗試以下代碼。 它應該工作：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .Inlinetext{ color:red;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> function ChangeTextColour(start,end){ var startingHtml = "<span class='Inlinetext'>"; var endingHtml="</span>"; var middleHtml=$("#Inlinetext").html().substring(start, end); $("#Inlinetext").html($("#Inlinetext").html().substring(0, start)+startingHtml+middleHtml+endingHtml+$("#Inlinetext").html().substring(end)); } </script> </head> <body onload="ChangeTextColour(3,100)"> <span id="Inlinetext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </body> </html>
您只需要提及字符串的開始和結束位置，這將更改樣式表。 如果您希望使用多個樣式表，請在CSS標記中使用。
解決方案2
0 2015-06-16 10:18:49
找到您要匹配的字符串，然后用跨度包裝器替換它並突出顯示它。
http://bartaz.github.io/sandbox.js/jquery.highlight.html，這是示例插件
解決方案3
0 2015-06-16 10:29:38
這是您所需的簡單javascript實現。 https://jsfiddle.net/ewgsyn10/
如果您想將CSS應用於該特定部分，則可以使用<span class="your-css-class">代替<b>並且類似地將其作為結束標記。
解決方案4
0 2015-06-16 10:55:31
您將在該范圍內動態插入另一個范圍。 我已經用javascript編寫了以下代碼來執行相同的操作。 希望對您有幫助。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .text{ color:red;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> function ChangeColor(start,end){ var newStartHtml = "<span class='text'>"; var newEndHtml="</span>"; var midHtml=$("#text").html().substring(start, end); $("#text").html($("#text").html().substring(0, start)+newStartHtml+midHtml+newEndHtml+$("#text").html().substring(end)); } </script> </head> <body onload="ChangeColor(3,15)"> <span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </body> </html>
僅更改 html 文本樣式的一部分
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.