Как переопределить CSS-классы с помощью Javascript

Question

Допустим, мы определили класс CSS, который применяется к различным элементам на странице.

colourful
{
    color: #DD00DD;
    background-color: #330033;
}

Люди жаловались на цвет, что им не нравится розовый / фиолетовый. Таким образом, вы хотите дать им возможность менять стиль по своему желанию, и они могут выбирать свои любимые цвета. У вас есть маленький виджет выбора цвета, который вызывает функцию Javascript:

function changeColourful(colorRGB, backgroundColorRGB)
{
    // answer goes here
}

Что входит в тело этой функции?

Намерение состоит в том, что когда пользователь выбирает новый цвет на палитре цветов, все элементы с class="colourful" будут менять свой стиль.

Answer 1

Я бы на самом деле реализовал эту серверную часть; просто сохраните предпочтительные цвета пользователя в его сеансе (с помощью файлов cookie или любого другого, который вам нравится и удобен) и динамически генерируйте CSS, т.е.

colourful {
  color: ${userPrefs.colourfulColour};
  background-color: ${userPrefs.colourfulBackgroundColour};
} 

Если вам действительно удобнее делать это с помощью Javascript, вы можете манипулировать CSS с помощью Javascript. Смотрите, например:

• Документация Microsoft
• https://developer.mozilla.org/en/DOM/style

Answer 2

var setStyleRule = function(selector, rule) {
    var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];
    if(stylesheet.addRule) {
        stylesheet.addRule(selector, rule)
    } else if(stylesheet.insertRule) {
        stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
    }
};

Answer 3

Я только что попытался использовать пустой тег

Answer 4

JQuery:

function changeColourful(colorRGB, backgroundColorRGB)
{
    $('.colourful').css({color:colorRGB,backgroundColor:backgroundColorRGB});
}

Если вы хотите, чтобы изменения сохранялись на разных страницах, вам нужно было бы сохранить их в файле cookie и повторно применять функцию каждый раз.

Answer 5

Я не знаю, как манипулировать классом напрямую, но вы можете эффективно делать то же самое. Вот пример в jQuery.

$('.colourful').css('background-color', 'purple').css('color','red');

В простом javascript вам нужно будет сделать больше работы.

Answer 6

Быстрый пример для определенного div / color - который может быть динамически передан через функцию

document.getElementById('Your Div Name Here').style.background = 'white';

Или изменить класс указанного элемента

document.getElementById('Your Div Name Here').classname = 'newclassname'

Предполагается, что вы можете указать div таким образом, если нет, то комбинация этого и решения для зацикливания узлов, показанного Кевином, должна помочь

Answer 7

Сначала проверьте, определено ли document.styleSheets (см. Ответ @ alex).

Если нет, этот вопрос должен быть полезен:
Получить все элементы в документе HTML с определенным классом CSS

См. Ссылку в принятом ответе и мой ответ внизу.

Это только одна часть ответа. Вам все равно придется пойти и применить новые значения, используя свойство стиля каждого элемента.

Answer 8

Это полный пример изменения фонового изображения в таблицу стилей. В первой части найдите правильную таблицу стилей. Здесь я хотел последний, чей href содержал «mycss.css». Вы также можете использовать свойство title.

Во второй части найдите правильное правило. Здесь я поставил маркер "MYCSSRULE", чтобы найти правильное правило.

Правило css в mycss.css: #map td, MYCSSRULE {background-image: url ("img1.png"); }

Третья часть просто меняет правило.

Этот процесс не работает с Internet Explorer 6. (IE 8 в порядке). Работает с Firefox 3 и Webkit.

Надеюсь, это помогло.

function changeBgImg(newimage) {
  var i,n;
  var ssheets = document.styleSheets;         // all styleSheets. Find the right one
  var ssheet;

  // find the last one whose href contain "myhref"
  n = ssheets.length;
  for (i=n-1; i>=0 ;i--) {
    var thisheet = ssheets[i];
    if ( (null != thisheet.href) && (thisheet.href.indexOf("mycss.css") != -1) ) {
      ssheet = thisheet; break;
    }
  }

  if ( (null == ssheet) || ("undefined" == typeof(ssheet.cssRules))) {
    // stylesheet not found or internet explorer 6
    return;
  }

  // find the right rule
  var rule;
  n = ssheet.cssRules.length;
  for (i=0; i<n; i++) {
    var r = ssheet.cssRules.item(i);
    if (typeof(r.selectorText) == "undefined") { continue; }
    if (r.selectorText.indexOf("MYCSSRULE") != -1) {
      rule = r; break;
    }
  }

  if (null == rule) {
    // not found
    return;
  }

  rule.style.backgroundImage = "url(" + newImage + ")";
}

Answer 9

Что-то вроде

function changeColourful(colorRGB, backgroundColorRGB)
 {changeColor (document, colorRGB, backgroundColorRGB)}

function changeColor (node, color, changeToColor)
{
   for(var ii = 0 ; ii < node.childNodes.length; ii++)
   {
     if(node.childNodes[ii].childNodes.length > 0)
     {
        changeColor(node.childNodes[ii], color, changeToColor);
     }

      if(node[ii].style.backgroundColor == color)
      {
        node[ii].style.backgroundColor = changeToColor;
      }

   }


}