Включая тег стиля в javascript

Question

Я хочу добавить тег стиля в javascript. т.е., я печатаю уведомления, и число уведомлений изменяется динамически. Я получаю уведомления в объекте JSON и, следовательно, требую, чтобы стили применялись к каждому уведомлению отдельно.

Сейчас я просто хочу границу вокруг каждого уведомления или текста

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 }

Я печать уведомлений в блоке еще используя для цикла, находя длину объекта и добавляет его заголовок. Здесь я хочу, чтобы напечатать рамку для печати вокруг каждого блока

<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>

, что очевидно.

Спасибо.

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

Answer 2

Если вы используете классы 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 для управления макетом.

Answer 3

Вы можете применить стиль 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.