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块中打印通知，方法是找到对象长度并将其附加到标题。这是我想在每个块周围打印边框的地方

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

如果我在这里使用样式，则边框会显示为整个块或单个边框显示所有通知。

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

，这很明显。

感谢。

Answer 1

如果您使用CSS类，您可以稍后通过修改CSS而不是JavaScript和HTML来更轻松地更改设计。

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

您可以将HTML放在JavaScript中，并根据需要使用尽可能多的类。

此外，尽量避免使用＆lt; strong＆gt;和＆lt; br＆gt;并使用CSS来控制布局。

Answer 2

您可以对css内的每个通知应用#heading样式。

这样的东西应该可以正常工作（将它放在你的css文件中或style标签内）：

#heading strong {
  border: 2px dashed;
}

我建议围绕span中的每个通知并将其附加到#heading内的li内，然后应用此样式：

#heading li {
 list-style:none;
  margin: 0 auto;
  text-align: center;
}
#heading li span {
    border: 2px dashed;
  font-weight: bold;
}

你的html看起来像这样：

<ul id='heading'>
  <!-- your newly inserted notice -->
  <li><span>text</span></li>
</ul>

这样就无需使用center和br代码。

Answer 3

我相信您可以完全使用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>

＆＃13;

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>" );
        }
    }
}

＆＃13;

在javascript中包含样式标记

3 个答案: