javascript - 在javascript中包含样式标签

Question

我想在 javascript 中包含样式标签。即，我正在打印通知，通知的数量动态变化。我在 JSON 对象中收到通知，因此需要分别将样式应用于每个通知。

现在我只想要每个通知或文本周围的边框

function retrive()
			{
				/*var css = ' { border :2px dashed; }',
				head = document.head || document.getElementsByTagName('head')[0],
				style = document.createElement('style');
				style.type = 'text/css';		Not working*/
				
				var myObj = JSON.parse(localStorage.getItem("Notice"));
				if(myObj.length == 0)
				{
					$('#title').append(
						'<br><br>Currently There are no Notices to be displayed'
					);
				}
				
				else
				{
					for(var i = 0; i < myObj.length; i++)
					{
						$('#heading').append(
							'<br><br><strong><center>'+ myObj[i].title+'</center></strong><br>'+myObj[i].introtext
						);
					}
				}
			}

我通过查找对象长度并将其附加到标题来使用 for 循环在 else block 中打印通知。这是我要在每个 block 周围打印边框的地方

<div>
	<ul id="heading" style = "font-size : 16px;">
					
	</ul>					
</div>

如果我在这里使用样式，边框将出现在整个 block 中或单个边框出现在所有通知中。

<div>
	<ul id="heading" style = "font-size : 16px; border : 2px dashed">
					
    </ul>					
</div>

，这是显而易见的。

谢谢。

Answer 1

我相信您完全可以使用 CSS 和适用的类来处理这个问题。如果您需要根据元素数量进行更改，您可以为不同的计数值集定义类，这将导致相同的 CSS 设置，并将该类简单地应用于标题。根据您的代码中的内容，情况似乎并非如此，下面的示例应该近似于您要实现的目标。

注意:我假设您使用的是标准 CSS reset删除列表样式。如果没有，那么我建议您应该这样做。

<style>
#title p {
    padding-top: 1em;
}

#heading {
   font-size: 16px;
}

#heading li {
   border: 2px dashed;
}

#heading li span.item_title {
   font-weight: bold;
   display:  block;
   text-align: center;
}

#heading li span.item_text {
   display: block;
}
</style>

function retrive()
{

    var myObj = JSON.parse(localStorage.getItem("Notice"));
    if(myObj.length == 0)
    {
        $('#title').append('<p>Currently There are no Notices to be displayed</p>' );
    }
    else
    { 
        for(var i = 0; i < myObj.length; i++)
        {
             $('#heading').append('<li><span class="item_title">'+ myObj[i].title+'</span><span class="item_text"'+myObj[i].introtext+ "</span></li>" );
        }
    }
}