Блог

Главная - Вопросы по программированию - Как установить цвет фона, определенный как класс CSS (в конечном итоге с использованием jQuery)?

Как установить цвет фона, определенный как класс CSS (в конечном итоге с использованием jQuery)?

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я все еще новичок в CSS / Javascript / jQuery. Я определяю пару цветов как классы в файле css. Затем я хочу использовать один из них в качестве цвета фона HTML-страницы:

 .wf_blue { color:rgb(2, 12, 40); }
.wf_white { color:rgb(255, 252, 247); }

body{background-color: wf_blue;}

Вышеуказанное не работает. Я пытался с помощью jQuery, но безуспешно. Я видел другие вопросы по SO, но не смог найти решение. Что я делаю не так?

Ответ №1:

ваши классы могут использоваться только в HTML-разметке следующим образом

 <body class="wf_blue">....

Альтернативно вы можете установить этот класс с помощью jQuery

 $('body').addClass('wf_blue');

Если вы хотите использовать переменные в CSS, вы можете взглянуть на SASS или LESS, которые являются препроцессорами CSS

Комментарии:

1. Когда я это делаю, фон не обновляется. Похоже, мне нужно объявить цвет фона в CSS, а не цвет (тогда это работает). Мне было интересно, можно ли повторно использовать цвет в качестве цвета фона.

2. Нет, это не так, как все работает в CSS. Тем не менее, если вы хотите повторно использовать элементы / цвета, взгляните на ссылки выше.

Ответ №2:

Если вы хотите использовать переменные в CSS, вам придется использовать промежуточный язык, например less или Sass.

Ответ №3:

Во-первых, CSS должен быть:

 .wf_blue { background-color: rgb(2, 12, 40); }
.wf_white { background-color: rgb(255, 252, 247); }

В обычном HTML

 <body class="wf_blue">

С помощью jQuery:

 $(document).ready(function() {
  $("body").addClass("wf_blue");
});

Комментарии:

1. Это работает, когда я определяю цвет как цвет фона. Мне было интересно, можно ли повторно использовать цвет в качестве цвета фона. Это так?

2. Нет, color и background-color являются отдельными. Как говорит топек, посмотрите в SASS или LESS для многоразовых переменных в CSS

Ответ №4:

Если вы не хотите использовать библиотеку javascript (например, jquery или prototype), вы можете написать напрямую: A. HTML:

  <body class="wf_blue">

B. javascript:

  document.getElementsByTagName ('body') [0]. addClass ('wf_blue');

Спасибо

Метки: