我想在 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>
,这是显而易见的。
谢谢。
最佳答案
我相信您完全可以使用 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>" );
}
}
}
关于javascript - 在javascript中包含样式标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30424963/