在javascript中包含样式标签

Including style tag in javascript

本文关键字：样式 标签 包含 javascript      更新时间：2023-09-26

我想在javascript中包含样式标签。ie。，我正在打印通知，通知的数量是动态变化的。我在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
						);
					}
				}
			}

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

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

如果我在这里使用style，边框会显示为整个块或单个边框。

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

，这是显而易见的。

谢谢。

我相信您完全可以用CSS和适用的类来处理这个问题。如果需要根据条目的数量进行更改，则可以为不同的计数值集定义类，从而产生相同的CSS设置，并简单地将该类应用于标题。根据你的代码，看起来不是这样的，下面的例子应该接近你想要达到的效果。

注意:我假设你正在使用一个标准的CSS重置来删除列表样式。如果没有，那么我建议你应该。

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

如果你使用CSS类，你将能够更容易地改变设计，通过修改CSS，而不是JavaScript和HTML。

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

你可以把HTML放在你已经有它的JavaScript中，并使用尽可能多的类。

此外，尽量避免使用和
，并使用CSS来控制布局。

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

像这样的东西应该工作得很好(把它放在你的css文件或style标签内):

#heading strong {
  border: 2px dashed;
}

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

#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标签的需要。

相关文章：