在javascript中包含樣式標記

我想在JavaScript中包含樣式標記。即，我正在打印通知，通知數量動態變化。我收到JSON對象中的通知，因此要求樣式分別應用於每個通知。在javascript中包含樣式標記

現在我只想身邊的每個通知或文本

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

我使用for循環打印的告示在else塊被查找對象的長度和其追加到邊界標題。這是我想打印邊框每塊

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

如果我在這裏使用的風格，邊框似乎整個塊或單個邊框所有通知進行打印。

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

，這是顯而易見的。

謝謝。

來源

2015-05-24 Sagar Ch

要添加到頭部的CSS不工作，因爲你沒有選擇任何元素如：'VAR CSS ='{#heading邊界：2px的破滅; }''你也可以使用jquery [.css]（http://api.jquery.com/css/）來調整樣式。 – Last1Here

好的，先生。我應該如何將它包含或附加到其他塊中的標題塊？ –

不推薦使用'
'。我不會在java腳本中創建樣式使其難以修改網站 –

我相信你完全可以用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>"); 
 
     } 
 
    } 
 
}

來源

2015-05-24 15:24:37 tvanfosson

如果您使用CSS類，您將可以稍後更輕鬆地更改設計，方法是修改CSS，而不是JavaScript和HTML。

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

您可以將HTML放在您的JavaScript中，因爲您已經擁有它，並根據需要使用盡可能多的類。

另外，儘量避免使用< strong>和< br>，並使用CSS來控制佈局。

來源

2015-05-24 15:11:03 user2182349

您可以將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標記的需要。

來源

2015-05-24 15:12:00 JohnStrong

在javascript中包含樣式標記

回答

相關問題