Добавить стиль в DOM, не заменяя существующий - PullRequest
Новая
       12

Добавить стиль в DOM, не заменяя существующий

1 голос
/ 16 сентября 2010

Как я могу добавить элемент стиля в DOM, не удаляя существующий стиль элемента (например, цвет, выравнивание текста и т. Д.)?

Событие вызывает функцию, но проблема в том, что вместо этого 'Стиль' полностью заменяется одним элементом.

У меня есть простой код, запущенный для события: 

function changeback(onoff) {
   if(onoff) {
      document.getElementById("field1").style.background="#fff";
   } else            
      document.getElementById("field1").style.background="#000";
}

Ответы [ 2 ]

7 голосов
/ 16 сентября 2010

Какой браузер вы используете? В Chrome у меня это работает: 

<html> 
<head> 
<style type="text/css"> 
  .test { background: #ff0000; font-family: "Verdana"; }
</style> 
<script type="text/javascript"> 
  function changeback(onoff)
  {
    if(onoff){
      document.getElementById("field1").style.background="#0f0";
    } else {
      document.getElementById("field1").style.background="#000";
    }
  }
 </script> 
 </head> 
 <body> 
   <h1>Test</h1> 
   <p id="field1" onclick="changeback(true);" class="test">This is a test</p> 
</body> 
</html>

Когда я нажимаю на текст, цвет фона меняется, но остальная часть стиля (в данном случае шрифт) остается прежней.

Это то, что вы пытаетесь сделать?

6 голосов
/ 16 сентября 2010

Вот как вы можете это сделать: 

var elem = document.getElementById('YOUR ELEMENT ID');
elem.style.setProperty('border','1px solid black','');

elem.style - это объект, реализующий интерфейс CSSStyleDeclaration , который поддерживает функцию setProperty. Если вы проверите свойство style в Firebug сейчас, вы заметите добавление свойства border в атрибуте style элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...