如何在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

回答

相关问题