如何在Javascript中爲某些標籤添加樣式（字體大小）

-1

因此，我製作了自舉卡片（帶有圖片，標題，說明，鏈接等）。這些描述在長度上有所不同，從50-250個字符，我希望它適合固定的寬度和高度。所以我正在考慮獲取描述的長度並將它彈出到if語句中以更改字體大小。如何在Javascript中爲某些標籤添加樣式（字體大小）

但是將字體大小只是應用於超過一定長度的描述，是我遇到麻煩的地方。

這裏是形成於功能的HTML：

card.innerHTML = "<div class='card'><img class='card-img-top' src='" + imgAddress + "' alt='Image'><div class='card-block'><h4 class='card-title'>" + title + "</h4><span class='desc'>" + desc + "</span><a href='" + linkAddress + "' download><button class='btn btn-primary'>View on our website</button></a>"+ addSpreadsheet + "</div><div class='card-footer'>Expires: "+ endDate + "</div></div>";

有點亂，所以基本上我們只需要這一行

<span class='desc'>" + desc + "</span>

有什麼辦法，我可以添加一個ID或類到特定的跨度？如果我改變了整個卡的字體大小，我可以得到它的工作，但顯然不會工作。

讓我知道你是否需要更多信息或代碼。但我認爲這似乎足夠了。

來源

2017-06-16 ImDone

我使用固定長度。你可以用PHP或JavaScript來完成。在PHP中使用substr（）來縮短描述文本。 – Niroshan

我需要能夠容納更長的字符串。它是我爲了更好的代碼而不能妥協的一種情況。 – ImDone

然後難道你不能隱藏文本沒有限制？並添加'查看更多的desc'按鈕到你的卡？ – Niroshan

我寫一個例子給你

HTML：

<!--This p Tag contain 245 chars , We are going to limit it using javascript--> 
<p id="desc"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui consequatur magnam facilis quas dignissimos voluptate tempore, reiciendis quidem quam fuga asperiores, blanditiis inventore modi assumenda maiores mollitia alias perferendis fugiat. 
</p>

Java腳本：在這種情況串

var e = document.getElementById('desc').innerHTML; 
console.log(e.length); //245 
var newDesc =""; 
for(var i=0; i<=e.length-1; i++){ 
    if(i<100) //Limit it to what ever you want, I limit it to 100 
     newDesc += e[i]; 
    else 
     break; 
} 
    console.log(newDesc.length);// 100 
    document.getElementById('desc').innerHTML= newDesc;

https://jsfiddle.net/emilvr/t2ekv8w7/

來源

2017-06-16 03:42:11

回答

相關問題