Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.06.2010, 20:54
Кандидат Javascript-наук
Отправить личное сообщение для Maxman Посмотреть профиль Найти все сообщения от Maxman
 
Регистрация: 18.06.2010
Сообщений: 122

Кроссбраузерное получение стилей
Здравствуйте! Хотел написать функцию, которая принимает 2 параметра - имя стиля, и его значение. Функция должна возвращать массив элементов, в которых значения стилей совпали с введёнными. Ну что-то типа выборки по значением CSS-стилей. Столкнулся с проблемами: стили заданные напрямую в CSS в тегах style или внешнем файле нельзя получить через element.style, а getComputedStyle() возвращает не всегда так как было задано, например значения цветов возвращает всегда в формате RGB даже если оно было задано например "red", и от currentStyle тоже отличается результат, следовательно совпадать не будет. Вопрос: есть ли вообще в природе способ сделать это универсально и кроссбраузерно?
Ответить с цитированием
  #2 (permalink)  
Старый 18.06.2010, 20:59
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от Maxman
а getComputedStyle() возвращает не всегда так как было задано, например значения цветов возвращает всегда в формате RGB даже если оно было задано например "red"
Не только всегда RGB, во всех браузерах по разному, могут и к шестнадцатиричному виду приводить или вообще сохранять исходный вид, а еще есть всякие новые RGBA и HSL/HSLA.

В Opera 9.x есть баг, она может вернуть цвет, например "red", вместе с кавычками, т.е. будет строка вида:
var color = '"red"';


Вот тут недавно похожая тема была: Инверсия цвета

Последний раз редактировалось Octane, 18.06.2010 в 21:03.
Ответить с цитированием
  #3 (permalink)  
Старый 18.06.2010, 23:41
Кандидат Javascript-наук
Отправить личное сообщение для Maxman Посмотреть профиль Найти все сообщения от Maxman
 
Регистрация: 18.06.2010
Сообщений: 122

А вы не знаете, кто-нибудь уже писал подобное? Не цвет, а именно выборку по стилям. Может библиотеки какие-то есть?
Ответить с цитированием
  #4 (permalink)  
Старый 18.06.2010, 23:53
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Не знаю. А можно узнать, для чего вам это понадобилось?
Ответить с цитированием
  #5 (permalink)  
Старый 19.06.2010, 13:11
Кандидат Javascript-наук
Отправить личное сообщение для Maxman Посмотреть профиль Найти все сообщения от Maxman
 
Регистрация: 18.06.2010
Сообщений: 122

Да так... для общего развития)
Ответить с цитированием
  #6 (permalink)  
Старый 20.06.2010, 11:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

для общего развития)...для цветовых свойств css типа color, borderColor и т.д.
функция style_node(c, f, g)
с = node или id внутри которого будет поиск
f = свойство css
g= цвет можно Lime , #00FF00, rgb(0,255,0) или rgb(0%,100%,0%) или #FAE
фунция вернёт массив найденных элементов с данным свойством и цветом
в архиве сжатая версия
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style type="text/css">
.red{color:red}
.red1{color:#F00;}
</style>
</script>
<script language="JavaScript" type="text/javascript">
function style_node(c, f, g) {
    function h(a) {
        a = {
            aliceblue: "#f0f8ff",
            antiquewhite: "#faebd7",
            aqua: "#00ffff",
            aquamarine: "#7fffd4",
            azure: "#f0ffff",
            beige: "#f5f5dc",
            bisque: "#ffe4c4",
            black: "#000000",
            blanchedalmond: "#ffebcd",
            blue: "#0000ff",
            blueviolet: "#8a2be2",
            brown: "#a52a2a",
            burlywood: "#deb887",
            cadetblue: "#5f9ea0",
            chartreuse: "#7fff00",
            chocolate: "#d2691e",
            coral: "#ff7f50",
            cornflowerblue: "#6495ed",
            cornsilk: "#fff8dc",
            crimson: "#dc143c",
            cyan: "#00ffff",
            darkblue: "#00008b",
            darkcyan: "#008b8b",
            darkgoldenrod: "#b8860b",
            darkgray: "#a9a9a9",
            darkgreen: "#006400",
            darkkhaki: "#bdb76b",
            darkmagenta: "#8b008b",
            darkolivegreen: "#556b2f",
            darkorange: "#ff8c00",
            darkorchid: "#9932cc",
            darkred: "#8b0000",
            darksalmon: "#e9967a",
            darkseagreen: "#8fbc8f",
            darkslateblue: "#483d8b",
            darkslategray: "#2f4f4f",
            darkturquoise: "#00ced1",
            darkviolet: "#9400d3",
            deeppink: "#ff1493",
            deepskyblue: "#00bfff",
            dimgray: "#696969",
            dodgerblue: "#1e90ff",
            feldspar: "#d19275",
            firebrick: "#b22222",
            floralwhite: "#fffaf0",
            forestgreen: "#228b22",
            fuchsia: "#ff00ff",
            gainsboro: "#dcdcdc",
            ghostwhite: "#f8f8ff",
            gold: "#ffd700",
            goldenrod: "#daa520",
            gray: "#808080",
            green: "#008000",
            greenyellow: "#adff2f",
            honeydew: "#f0fff0",
            hotpink: "#ff69b4",
            indianred: "#cd5c5c",
            indigo: "#4b0082",
            ivory: "#fffff0",
            khaki: "#f0e68c",
            lavender: "#e6e6fa",
            lavenderblush: "#fff0f5",
            lawngreen: "#7cfc00",
            lemonchiffon: "#fffacd",
            lightblue: "#add8e6",
            lightcoral: "#f08080",
            lightcyan: "#e0ffff",
            lightgoldenrodyellow: "#fafad2",
            lightgrey: "#d3d3d3",
            lightgreen: "#90ee90",
            lightpink: "#ffb6c1",
            lightsalmon: "#ffa07a",
            lightseagreen: "#20b2aa",
            lightskyblue: "#87cefa",
            lightslateblue: "#8470ff",
            lightslategray: "#778899",
            lightsteelblue: "#b0c4de",
            lightyellow: "#ffffe0",
            lime: "#00ff00",
            limegreen: "#32cd32",
            linen: "#faf0e6",
            magenta: "#ff00ff",
            maroon: "#800000",
            mediumaquamarine: "#66cdaa",
            mediumblue: "#0000cd",
            mediumorchid: "#ba55d3",
            mediumpurple: "#9370d8",
            mediumseagreen: "#3cb371",
            mediumslateblue: "#7b68ee",
            mediumspringgreen: "#00fa9a",
            mediumturquoise: "#48d1cc",
            mediumvioletred: "#c71585",
            midnightblue: "#191970",
            mintcream: "#f5fffa",
            mistyrose: "#ffe4e1",
            moccasin: "#ffe4b5",
            navajowhite: "#ffdead",
            navy: "#000080",
            oldlace: "#fdf5e6",
            olive: "#808000",
            olivedrab: "#6b8e23",
            orange: "#ffa500",
            orangered: "#ff4500",
            orchid: "#da70d6",
            palegoldenrod: "#eee8aa",
            palegreen: "#98fb98",
            paleturquoise: "#afeeee",
            palevioletred: "#d87093",
            papayawhip: "#ffefd5",
            peachpuff: "#ffdab9",
            peru: "#cd853f",
            pink: "#ffc0cb",
            plum: "#dda0dd",
            powderblue: "#b0e0e6",
            purple: "#800080",
            red: "#ff0000",
            rosybrown: "#bc8f8f",
            royalblue: "#4169e1",
            saddlebrown: "#8b4513",
            salmon: "#fa8072",
            sandybrown: "#f4a460",
            seagreen: "#2e8b57",
            seashell: "#fff5ee",
            sienna: "#a0522d",
            silver: "#c0c0c0",
            skyblue: "#87ceeb",
            slateblue: "#6a5acd",
            slategray: "#708090",
            snow: "#fffafa",
            springgreen: "#00ff7f",
            steelblue: "#4682b4",
            tan: "#d2b48c",
            teal: "#008080",
            thistle: "#d8bfd8",
            tomato: "#ff6347",
            turquoise: "#40e0d0",
            violet: "#ee82ee",
            violetred: "#d02090",
            wheat: "#f5deb3",
            white: "#ffffff",
            whitesmoke: "#f5f5f5",
            yellow: "#ffff00",
            yellowgreen: "#9acd32"
        }[a.toLowerCase()] || a;
        a = a.replace(/\s/g, "");
        var d = a.match(/^rgb\((\d{1,3}[%]?),(\d{1,3}[%]?),(\d{1,3}[%]?)\)$/i);
        if (d) {
            a = "";
            for (var b = 1; b <= 3; b++) a += Math.round((d[b][d[b].length - 1] == "%" ? 2.55 : 1) * parseInt(d[b], 10)).toString(16).replace(/^(.)$/, "0$1")
        } else a = a.replace(/^#?([\da-f])([\da-f])([\da-f])$/i, "$1$1$2$2$3$3");
        a = a.match(/^#?([\dabcdef]{2})([\dabcdef]{2})([\dabcdef]{2})$/i);
        if (!a) return false;
        b = 1;
        for (d = "#"; b <= 3; b++) d += parseInt(a[b], 16).toString(16).toUpperCase().replace(/^(.)$/, "0$1");
        return d
    }
    arr = [];
    c = (typeof c == "string" ? document.getElementById(c) : c).getElementsByTagName("*");
    for (var e = 0; e < c.length; e++) {
        var i = c[e].currentStyle || window.getComputedStyle(c[e], null);
        if (h(i[f]) == h(g)) arr[arr.length] = c[e]
    }
    return arr
};
function show()
{
 var arr=style_node(document.body,'color','red');
 for (var i=0; i<arr.length; i++){alert(arr[i].id)};
}
</script>
</head>

<body onload="show()">
<div  id="show">
  <div class="red" id="red">
    red
  </div>

  <div class="red1" id="red1">
    red1
  </div>

  <div style=" color: RGB(255, 0, 0)" id="red2">
    red2
  </div>

  <div style=" color: Green" id="green">
    green
   </div>
   </div>
</body>
</html>

Последний раз редактировалось рони, 24.05.2014 в 14:10.
Ответить с цитированием
  #7 (permalink)  
Старый 20.06.2010, 11:58
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Для fontWeight нет подобного разбора?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переодическое получение ответа от сервера demoniqus AJAX и COMET 6 22.06.2010 16:09
Получение в JavaScript значений переменных, посланных методом POST Ratibor Redoran Общие вопросы Javascript 5 08.06.2010 16:36
Изменение путей к таблицам стилей и скриптам в скрипете галереи lightbox 2.04 Flashton Элементы интерфейса 1 01.02.2010 10:10
Получение текстового содержимого из всех вложенных DOM EmDmAl Events/DOM/Window 8 02.12.2009 23:38
Автоматическое получение данных из формы Beck jQuery 6 06.11.2009 18:01