JQuery: создавать / читать. CSS стили во время выполнения - PullRequest
Новая
       14

JQuery: создавать / читать. CSS стили во время выполнения

0 голосов
/ 23 января 2012

У меня есть приложение, в котором я использую jQuery + maphilight , и в дополнение к выделению сегментов карты изображения я хотел бы динамически выделять определенные элементы HTML, основываясь на событиях mouseover / mouseout длякарты изображений.

Я знаю, как сделать все это (только соответствующие вызовы addClass и removeClass для элемента HTML, который я хочу выделить), за исключением одной вещи.Я хочу сделать одно из следующего:

  • создать стиль CSS во время выполнения, который отражает визуальные настройки maphilight (стиль линии / заливки + непрозрачность)
  • установить плагин maphilight для зеркаластиль CSS, который я настроил.

Я бы предпочел сделать последнее и настроить его в файле .css, но в настоящее время я не знаю, как это сделать.

Может ли кто-нибудь мне помочь?

edit: я ищу ответ, который включает в себя, как читать или писать стили из плагина jQuery maphilight, так как он не имеет много документации.

1 Ответ

0 голосов
/ 23 января 2012

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

var renderDropArea = function(renderMe) {
  var dropSheet = document.getElementById('dropAllowedDisplay');
  if (renderMe) {
    // IE 7 & 8
    if (dropSheet.styleSheet) {
      dropSheet.styleSheet.addRule('.dropAllowedHead','background-color:#72F193;');
      dropSheet.styleSheet.addRule('.dropAllowed','background-color:#72F193;');
    } else {
      document.getElementById('dropAllowedDisplay').innerHTML =
        ".dropAllowedHead { background-color:#72F193; } .dropAllowed { background-color:#72F193; }";
    }
  } else {
    // IE 7 & 8
    if (dropSheet.styleSheet) {
      if (dropSheet.styleSheet.rules.length) {
        dropSheet.styleSheet.removeRule(0);
        dropSheet.styleSheet.removeRule(0);
          }
    } else {
      document.getElementById('dropAllowedDisplay').innerHTML = '';
    }   
      }
}
...