2012-12-20 3 views
4

Сай, у меня есть следующий класс CSS:получить цвет фона класса CSS применяется к элементу

.upComing{ background:#ccc; font-weight:bold; } 

и в моем HTML У меня есть таблица, в которой некоторые строки имеют этот класс применяется, например, так:

<table> 
    <tr> <td></td> <td></td> </tr> 
    <tr> <td></td> <td></td> </tr> 
    <tr class='upComing'> <td></td> <td></td> </tr> 
    <tr> <td></td> <td></td> </tr> 
    <tr class='upComing'> <td></td> <td></td> </tr> 
</table> 

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

Мне нужно сделать это, потому что таблица может быть экспортирована в файл excel, а цвета строк не применяются к файлу excel, если они относятся к классу CSS, я хочу применить этот цвет к каждому td перед отправкой html в генератор excel.

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

--Update-- Вот эта информация по этой теме, для этого действительно существует чистое решение для JavaScript, мне нужно было погрузиться в исходный код jQuery, чтобы проверить это. Вот решение:

1) указывают на любой желаемый элемент

var tr = $("tr.upComing").first()[0]; 

2) получить вычисленное стиль элемента

var css = window.getComputedStyle(tr); 

3) получить значение свойства КОМПЬЮТЕРНОЙ СТИЛЬ

var color = css.getPropertyValue("background-color"); 

С этого момента я тестировал только в FF, Safari, Chromium и Opera на Mac, если кто-то мог попробуйте это в IE и дайте нам отзывы, которые будут великими.

+0

По существу дублирует http://stackoverflow.com/вопросы/3319/CSS-фон-цвет-в-JavaScript. Вы можете использовать тот же синтаксис, чтобы получить значение. –

+0

Спасибо Aaron, я думаю, что это не настоящий дубликат, так как этот вопрос касается установки фона (inline), этот вопрос касается получения фона, применяемого к элементу класса css. Во всяком случае, спасибо за крик. –

+0

Вот обновление по этой теме, на самом деле есть чистое решение для javascript для этого, я должен был погрузиться в исходный код jquery, чтобы проверить это. Вот решение: 1) указать на нужный элемент var tr = $ ("tr.upComing"). First() [0]; 2) получить COMPUTED STYLE элемента var css = window.getComputedStyle (tr); 3) получите СОБСТВЕННУЮ СТОИМОСТЬ ВЫЧИСЛЕННОГО СТИЛЯ var color = css.getPropertyValue («background-color»); на данный момент я тестировал только в FF, Safari, Chromium и Opera на Mac, если кто-то может попробовать это в IE и дать нам отзывы, которые будут великими. –

ответ

5

Вы можете использовать метод JQuery CSS, чтобы получить цвет фона из элемента: http://api.jquery.com/css/

var color = $(this).css("background-color"); 
+1

Спасибо, это работает действительно, но, увы, для этого требуется использовать метод jquery. Даже если это плагин jquery, это 95% или более чистых js, и я хотел, чтобы это была чистая реализация js, довольно странно, что js element.style.backgroundColor дает пустую строку, такую ​​же, как element.style.background ... Я продолжу расследование и, возможно, опубликую решение pure js. –

+0

@SamCcp, какой элемент вы проверяете? –

+0

Элемент, которым меня интересует строка (tr), два курса действия, 1) пользователь выбирает группу строк из флажка в столбце, эти строки обязательно отправляются в файл excel, я получаю tr выбранных из флажков с элементом element.parentNode (где element - td, который дает мне tr). 2) пользователь нажимает кнопку экспорта, и вся таблица переходит в excel, проблема в том, что строки (tr), окрашенные из класса css, не окрашены в excel, но если я рисую каждую ячейку (td), они тоже окрашиваются на excel , –

2

Следующие должны делать это

$('.upComing:eq(0)').css('backgroundColor') 
+0

Почему вы используете ': eq (0) '? – Asimov4

+0

@ Asimov4 - вам на самом деле не нужно, так как функция css в любом случае возвращает стиль первого совпадающего элемента в селекторе.Но использование: eq (0) делает это очевидным для разработчика –

Смежные вопросы