Как я могу проверить цвет фона класса с помощью jquery?

Question

Я установил цвет фона класса, используя css, теперь я хочу поместить его в переменную, используя jquery. Спасибо

Answer 1

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

.cm { background-color:#990000 }

-

// creating an empty element and applying our class to it
var bgcolor = $("<div>").appendTo("body").addClass("cm").css("background-color");
alert(bgcolor); // rgb(153, 0, 0)

Answer 2

Если на странице есть элемент, использующий этот класс, вы можете сделать что-то вроде:

var backgroundColor = $('.classname').css('background-color');

Но если ничто не использует класс, я не знаком с каким-либо способом получить сохранение цвета от загрузки файла .css и его синтаксического анализа в JavaScript (что не идеально).

Answer 3

Проблема в том, что jquery не может пройти реальную таблицу стилей (насколько я знаю), поэтому, если у вас есть элемент с двумя классами, вы не сможете узнать, был ли возвращенный цвет для того класса, который вы хотел или другой. Например:

.big { цвет фона: желтый; }

.mean { цвет фона: синий; }

Первый будет синим, но если вы запросите цвет фона, используя:

 $(".big").css("background-color");

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

Мне нравится идея Джонатана Сэмпсона. Создайте элемент, сделайте его невидимым или за кадром, но дайте ему идентификатор и класс, который вас интересует. Затем проверьте цвет фона этого идентификатора вместо проверки по классу:

 $("#colortest").css("background-color");

Answer 4

var $tmp = $('<a class="classname"></a>');
$('body').append($tmp).hide();
var color = $('.classname').css('background-color');
$tmp.remove();

РЕДАКТИРОВАТЬ: Применяет класс к скрытому элементу.