Кросс-браузерные функции
 

Вот такими функциями пользуюсь для себя. Может кому-то будут полезны. Пишите если в них что-то не так.

Функция получения CSS-свойства.

function xGetStyleValue(e,type1,type2){
	if(!type2)type2=type1;
	if(e.currentStyle&&e.currentStyle[type2]!='')return e.currentStyle[type2];
	else if(window.getComputedStyle(e,'').getPropertyValue(type1)!='')return window.getComputedStyle(e,'').getPropertyValue(type1);
}

Функция возвращает установленное, либо вычисленное значение указаного CSS-свойства. Под установленным подразумевается, значение описанное в CSS файле, либо присвоено по-умолчанию браузером. Если возвращается дефолтное значение, то естесственно оно может различаться в разных браузерах. Так же стоит заметить, что некоторые браузеры хранят значение CSS-свойств в разных форматах. Это не значит, что вы получите неправельные данные, просто они немного другого вида. Допустим вы определили в CSS файле сойство background-color в #fff для узла body. Тогда при попытке получить значение этого свойства, IE возвратит #fff, а Mozilla rgb(255, 255, 255). Оба ответа являются правельными и для того чтобы можно было пользоваться ими, необходима дополнительная функция-конвертер. Функция xGetStyleValue показывает, как всё-таки можно получить значения CSS свойств, если вы явно не указывали его в скрипте или через аттрибут style, т.к. при обращении, например, к ele.style.backgroundColor мы получим пустую строку.

Параметры:

e - узел DOM
type1 - своиство CSS (строка) как при использовании в файлах стилей, например 'margin-left'
type2 - свойство CSS (строка) как при динамическом обращении, например 'marginLeft'

Если свойства CSS одинаковые в обоих представлениях, например width, второй параметр можно не указывать.

Установка прозрачности

function xAlpha(e,n){
	(document.body.style.opacity)?e.style.opacity=n/100:e.style.filter=(n>=100)?null:'progid:DXImageTransform.Microsoft.Alpha(opacity='+n+')';
}

Параметры:

e - узел DOM
n - число от 0 до 100. 100 - нет прозрачности.

Функции получения размеров клиентской области окна

function xClientWidth(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientWidth:document.body.clientWidth;}
function xClientHeight(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientHeight:document.body.clientHeight;}

Функции для работы с событиями

Добавление функции для обработчика

function xAddEventListener(e,eventType,eventListener){
	if(e.addEventListener) e.addEventListener(eventType,eventListener,false);
	else if(e.attachEvent) e.attachEvent('on'+eventType,eventListener);
}

Параметры:

e - узел DOM
eventType - тип события без префикса 'on', например 'mousedown'
eventListener - имя регистрируемой функции

Удаление функции из обработчика

function xRemoveEventListener(e,eventType,eventListener){
	if(e.removeEventListener) e.removeEventListener(eventType,eventListener,false);
	else if(e.detachEvent) e.detachEvent('on'+eventType,eventListener);
}

Параметры аналогичны функции xAddEventListener().

Получение объекта, вызвавшего данное событие

function xGetEventTarget(evt){
	var e=evt.target||event.srcElement;
	return (e.nodeType==1)?e:e.parentNode;
}

В качестве параметра передаём событие. Например мы зарегистрировали функцию onEvent() с помощью функции xAddEventListener(). Для того, чтобы передать событие в нашу ф-цию пишем так:

function onEvent(evt){
	var e=xGetEventTarget(evt);
}

В переменной е хранится узел DOM, сгенерировавший событие.

Снятие выделения с текста

function clearSelection(){
	(document.selection&&document.selection.empty)?document.selection.empty():window.getSelection().removeAllRanges();
}

Отмена просачивания события

function xClearEvent(evt){
	if(evt.stopPropagation)evt.stopPropagation();
	else event.cancelBubble=true;
}

Сюда передаём сгенерированное событие, как для xGetEventTarget().

Отмена события по-умолчанию

function xCancelDefEvent(evt){
	if(evt.preventDefault)evt.preventDefault();
	else event.returnValue=false;
}

Сюда передаём сгенерированное событие, как для xGetEventTarget().

Функции для работы с AJAX

Создание объекта AJAX

function xCreateRequest(){
	return (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
}

Трансормация XML + XSL

function xTransform(xml,xsl){
	if(window.ActiveXObject)return xml.transformNode(xsl);
	var proc=new XSLTProcessor();
	var ser=new XMLSerializer();
	proc.importStylesheet(xsl);
	return ser.serializeToString(proc.transformToFragment(xml,document));
}

Передаём файлы XML и XSL, полученные в AJAX-ответе и получаем строку, которую затем можно вставить на страницу методом innerHTML.

Пока всё... Если кому непонятно как использовать ту или другую функцию - пишите.

жесть!!! e.currentStyle[type2] не катит уже?

function xGetEventTarget(e){
    e=e||event;
    return e.target||e.srcElement
}

ну и так далее...

СПС за замечание... оптимизация енто хорошо... исправлю...

Интересно где бы откопать браузер, который не поддерживает getElementById. Мне такой для коллекции нужен.

eval - зло. Здесь он совершенно не нужен.

Вы точно протестировали эту функцию? Для currentStyle нужен camelCase (или как там называется), а для getPropertyValue нужен .... , блин да не помню. В общем backgroundColor и background-color.

Кто сказал, что если есть documentElement.clientWidth, то в нем обязательно правильное значение.

1. Вам мешает document.all?! стоит ли отрезать его, если можно добавить дополнительную возможность?!

2. Eval исправил... писал её давно.

3. Эта функция работает в указанных браузерах. Если чесно все своиства не перебирал, но если нужно - выложу отдельно ф-цию для чтения/смены бэкграунда.

4. В нём правильное значение. IE8 понимает только эту конструкцию. Без documentElement возвращается пустое значение.

Смело режьте.

Теперь одно и тоже два раза вызывается. Нужно сохранять в переменную.

background-color это для примера. Там еще много подобных свойств. Вы для каждого будете отдельную функцию писать?

Тестируйте. На данный момент все совсем плохо.

1. Ок... ф-ция удаляется из списка.

2. Так оформленно из соображений компактности кода. Не думаю, что это сильно напрягёт интерпретатор и Вам никто не мешает переписать всё так, как вам это видится.

3. По-видимому я вас не правильно понял. Вас смущает, что background-color!=backgroundСolor?! Прочитайте описание под ф-цией. Мы должны указывать и background-color и backgroundСolor. Если у нас совпадают названия сойств - 2-ой параметр опускаем.

4. ОК. Протестим

Функция "Функции получения размеров окна" работает в IE, FF и Opera. Что конкретно плохо?!

Зачем же совсем удалять. Я имел в виду сделать так:

var $ = function(elem/* id */) {
	return typeof elem == 'string' ? $d.getElementById(elem) : elem;
};

Так он наоборот больше становится.

Так не проще сделать что бы 'margin-left' автоматически, когда это необходимо переводился в ''marginLeft'', и наоборот.

Исправлено описание для ф-ции "получения CSS-свойства". Ошибка была в неправильном описании порядка параметров. В часности свойство backgroudColor возвращается.