Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > style.backgroundColor в Firefox

Автор: Dave 9.6.2008, 17:41

Цвет ячейки задан в виде в шестнадцатиричном виде #cccccc
если получить style.backgroundColor в ИЕ то выдаст #cccccc,
а если в Firefox то выдаст rgb(204, 204, 204), пример ниже.
Как можно в FF получить Firefox #cccccc а не rgb(204, 204, 204) ?
Думаю преобразовывать как то нужно, не знаю как только.

Код


<html>
<head>
<script >
function Over(obj){
    alert(obj.style.backgroundColor)    ;#output will be rgb(204, 204, 204)
    if (obj.style.backgroundColor =='#cccccc' ){
        obj.style.backgroundColor='red';
    }

}
</script>
</head>


    <body>
    <table border="1" width="500">
    <tr>
        <td style="background-color:#cccccc;" onmouseover="Over(this);">
                                                  12121
        </td>    
    </tr>
    <tr>
        <td style="background-color:#cccccc;" onmouseover="">
                                                  333333
        </td>    
    </tr>
    <tr>

        <td style="background-color:#cccccc;" onmouseover="">
                                                  44444
        </td>    


    </tr>
    </table>    

    </body>
</html>

Автор: IDVsbruck 9.6.2008, 19:16

То, что ты получаешь - это, фактически, интерпретация CSS.
У самой ячейки есть свойство bgColor, которым можно воспользоваться для получения цвета в представлении javascript. Думаю, это наиболее правильное решение.
Хотя в крайнем случае, если все же прийдется работать со строкой, то отдели от нее rgb с открывающей и закрывающей скобкой, затем функцией split(строка, ",") раздели строку на массив, а каждое из трех элементов массива преобразуй в HEX: parseInt(stroka_iz_massiva, 16). Так ты получишь 3 хекса, которые можно соединить в строку типа "#xxxxxx".

Автор: Ghirik 10.6.2008, 00:01

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

Для кроссбраузерного получения действующего стиля:

Код


$tyle = function (el) {!el.currentStyle ? style = document.defaultView.getComputedStyle(el, null) : style = el.currentStyle; return style;};

И для парса действующих цветов:

Код


function rgb(color) { if (/#/.test(color)) {var rgb = color.replace(/[# ]/g,"").replace(/^(.)(.)(.)$/,'$1$1$2$2$3$3').match(/.{2}/g); for (var i = 0;  i < 3; i++) rgb[i] = parseInt(rgb[i], 16); } else if (/rgb/.test(color)) {    var rgb = /(\d+), (\d+), (\d+)/.exec(color); for (var i = 0;  i < 3; i++) rgb[i] = Number(rgb[i+1]);    rgb.pop(); }; return rgb; };

Строчка такого вида

var rgb = rgb($tyle(oject).backgroundColor);

Вернет вам массив с тремя элементами R-G-B в десятичном виде.

При этом, значения могут быть заданы хоть где, хоть через таблицы стилей, хоть прямо в атрибуте.

Автор: Dave 10.6.2008, 12:43

Всем спасибо, помогли !

Автор: Ghirik 27.6.2008, 09:52

Изменил функцию для взятия действующих стилей:

Код


style = function(el) { return !el.currentStyle ? document.defaultView.getComputedStyle(el, null) : el.currentStyle; };

Стало совсем просто...