Стиль innerHTML

Question

Я пытаюсь понять поведение тегов стиля при использовании с innerHTML.

Я сделал 3 эксперимента:

стиль с существующим правилом, innerHTML вставляет другое правило Selector

Результат: оба правила. Демонстрация: http://jsfiddle.net/Tcy3B/

Style с существующим правилом, innerHTML вставляет то же самое правило Selector

Результат: новое правило игнорируется. Демонстрация: http://jsfiddle.net/Tcy3B/1/

Пустой стиль, innerHTML вставляет правило, другой innerHTML вставляет еще одно правило

Результат: второе правило перезаписывает первый. Демонстрация: http://jsfiddle.net/Tcy3B/2/

Может ли кто-нибудь объяснить логику? Это выглядит совершенно случайным для меня, иногда второе правило добавляется к первому, иногда оно игнорируется, а иногда оно перезаписывает первый.

Фон: идея заключается в создании динамических пользовательских интерфейсов, которые полагаются на CSS, а не на JavaScript, как показано на рисунке full text search example.

В качестве примера, вот код второго демо:

HTML:

<style type="text/css"> 
    .red {color:red;} 
</style> 
<div class="red">red</div> 
<div class="blue">blue</div> 

JavaScript:

var st=document.getElementsByTagName("style")[0]; 
st.innerHTML=".red {color:blue;}"; 

Answer 1

Это довольно интересно.

Это почти похоже на то, что у вас уже есть стиль, уже загруженный в теги <style></style>, он сохраняет его после того, как вы напишете .innerHTML тега <style>. Однако каждый раз, когда вы пишете на .innerHTML, он перезаписывает все это. если в вашем третьем примере используется += как, как показано ниже, следует добавить оба стиля:

var st=document.getElementsByTagName("style")[0]; 
st.innerHTML = ".red {color:red;}"; 
st.innerHTML += ".blue {color:blue;}"; 

Answer 2

В неочищенном интуитивное правило эмпирическое, это может быть полезно отметить, что innerHTML предназначен для работы с HTML, но вы применяете его на CSS. Возможно, вы столкнетесь с подобными «забавными» проблемами, если попытаетесь изменить элементы script, используя innerHTML.

Лучшим интерфейсом для динамического изменения наборов правил стилей будет document.styleSheets. Консорциум W3 имеет полезный обзор по этому вопросу: http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript.