Кроссбраузерное получение стилей
Здравствуйте! Хотел написать функцию, которая принимает 2 параметра - имя стиля, и его значение. Функция должна возвращать массив элементов, в которых значения стилей совпали с введёнными. Ну что-то типа выборки по значением CSS-стилей. Столкнулся с проблемами: стили заданные напрямую в CSS в тегах style или внешнем файле нельзя получить через element.style, а getComputedStyle() возвращает не всегда так как было задано, например значения цветов возвращает всегда в формате RGB даже если оно было задано например "red", и от currentStyle тоже отличается результат, следовательно совпадать не будет. Вопрос: есть ли вообще в природе способ сделать это универсально и кроссбраузерно?
|
Цитата:
В Opera 9.x есть баг, она может вернуть цвет, например "red", вместе с кавычками, т.е. будет строка вида: var color = '"red"'; Вот тут недавно похожая тема была: http://javascript.ru/forum/misc/1004...iya-cveta.html |
А вы не знаете, кто-нибудь уже писал подобное? Не цвет, а именно выборку по стилям. Может библиотеки какие-то есть?
|
Не знаю. А можно узнать, для чего вам это понадобилось?
|
Да так... для общего развития)
|
для общего развития)...для цветовых свойств 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>
|
Для fontWeight нет подобного разбора? :)
|
| Часовой пояс GMT +3, время: 01:04. |