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

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

Функция получения 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 возвращается.

да... так тоже можно... опять же всё для компактности... любой может прикрутить себе такую фичу, если его не устраивают такие параметры... Суть ф-ции - работать... а удобство использования не так критично.

Зачем? typeof сам по себе нормален. А вот функция типа isArray не повредила бы.

Затем, что эти ф-ции используются почти во всех остальных. И я нахожу это удобным.

isArray да... но не для этого поста... тут не "полезные", а "кросс-браузерные" ф-ции...

Аргумент из серии: я написал функцию

function f(x) { return x; }

и использую ее везде.

То, что она работает, еще не значит, что она выдает правильный результат во всех актуальных браузерах.

По крайней мере они совпадают, и все скрипты, которые я писал и используют эту функцию - работают пиксель-в-пиксель. Под понятием "размер окна" я подразумеваю размер узла body а не окно самого браузера. Не вижу никаких причин в сомнении... если у Вас есть что-то конкретное - говорите... зачем догадками?!

:)

Когда в 100 местах мы будем писать typeof(n)=='хз_что' вместо xDef(n) - разница будет видна...

Размер клиентской области?

именно... Если кого ввёл в ступор - сори...

prototype.1.6.1_rc2.js
str 3093

document.viewport = {

  getDimensions: function() {
    return { width: this.getWidth(), height: this.getHeight() };
  },

  getScrollOffsets: function() {
    return Element._returnOffset(
      window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
      window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop);
  }
};

(function(viewport) {
  var B = Prototype.Browser, doc = document, element, property = {};

  function getRootElement() {
    if (B.WebKit && !doc.evaluate)
      return document;

    if (B.Opera && window.parseFloat(window.opera.version()) < 9.5)
      return document.body;

    return document.documentElement;
  }

  function define(D) {
    if (!element) element = getRootElement();

    property[D] = 'client' + D;

    viewport['get' + D] = function() { return element[property[D]] };
    return viewport['get' + D]();
  }

  viewport.getWidth  = define.curry('Width');

  viewport.getHeight = define.curry('Height');
})(document.viewport);

Единственный минус: не учитывается compatMode. Но это сейчас уже не столь актуально.

Очень хрупко...

window.parseFloat(window.opera.version()) < 9.5

Не стал бы таким пользоваться...

prototype.1.6.1_rc2.js
не до конца понятно для чего этот код.

У вас предвзятое мнение. Хрупко как раз у вас.

Везде и в любых авторитетных источниках говорится о неправильном подходе к написанию кросс-браузерных функций. А именно о том, что почти во всех библиотеках и фреймворках есть проверка версии или типа браузера и не её основе строят логику. Это не есть гуд. Покажите мне кусок моего кода, где используется неправельный код.

ИМХО

писать такие вещи нада так, что бы в конце всех условий была такая контрукция, которая описана в доках W3C.

Мнение в некотором смысле верное, но и меру нужно знать. В Opera9.5+ верное значение перенесли в documentElement.clientHeight. Как вы это хотите определить с помощью:
?

Факт остается фактом: пока ваш вариант некроссбраузерен. Вариант из PrototypeJs, по-вашему, плох, но он работает верно. Когда напишете вашим способом кроссбраузерный вариант, тогда и поговорим.

К этому нужно стремиться, но при всем желании это не всегда возможно.

А в чём, собственно, проблема?! Пусть переносят...

Мой вариант кроссбраузен для тех, которые я описал (IE, FF, Opera всех актуальных версий) и я сомневаюсь, что в Safari или Chrome что-то не сработает. Зачем так утверждать?! Лучше напишите ту ф-цию, которая не работает в заявленных браузерах.

Никто не говорил, что вариант из prototype плох.

Какой способ мне написать?! аналог их объекта?!

Давно уже перенесли. И в вашем скрипте это не учитывается.

Это вы так думаете. Простейший пример: уберите DOCTYPE из документа или поставьте любой старый. Ну как, правильно работает?

Как же вы можете утверждать, что функции кроссбраузерены, если вы их даже толком не тестируете.

----

Вы слышите только себя и ваше мнение всегда самое правильное? Обсуждение теряет смысл.

Давно уже перенесли. И в вашем скрипте это не учитывается.

Посмотрите на ф-цию... из какого, по вашему мнению, свойства возвратится значение в опере?!

Это вы так думаете. Простейший пример: уберите DOCTYPE из документа или поставьте любой старый. Ну как, правильно работает?

ОК... Сейчас проверим.

Как же вы можете утверждать, что функции кроссбраузерены, если вы их даже толком не тестируете.

Речь идёт о тех браузерах, которые я неоднократно уже перечислял.

Естесственно обсуждение не будет иметь смысла, когда тебе говорят - "Всё говно!" и при этом не приводят ни одного аргумента в поддержку этих слов.

После смены HTML 4.01 Transitional с на XHTML 1.0 Strict и назад, значеня, возвращаемые IE, FF и Opera не изменились при тестировании ф-ций xGetStyleValue и xClientHeight/xClientWidth. Думаю, перебор всех DTD/ф-ций не изменит ситуацию. Если у Вас действительно есть пример с DTD/ф-цией/браузером, где что-то не работает - выкладывайте. В ближайшее время оттестирую на Chrome.

Для оперы <9.5 должно возвращаться из body. А у вас? Или эти версии оперы уже не актуальны?

Создается впечатление, что вы не код подстраиваете под среду исполнения, а просто составили список браузеров, где ваш код все же заработал и все эти браузеры объявили актуальными.

Вы же обсуждали эти аргументы. Или может, обсуждали и не заметили?

Хорошо, раз кроме последних (почти) версий HTML и XHTML для вас ничего не существует (не актуально) попробуйте вообще убрать DOCTYPE.

В опере можно использовать как одно значение, так и другое при любом DTD, т.е. они ОДИНАКОВЫЕ. Где Вы видели разницу?!

Мой код не просто "всё же заработал". Эти функции писались ещё до появления Оперы 9.6 и IE8. И они продолжали работать без корректировки. И тестились не в 1 день, а больше года и в при разных условиях (типа DTD).

Я всё время пытаюсь добиться от Вас этих аргументов... То что всё же мне удаётся понять из ваших постов - то я и аргументирую.

ОК... минуту...

Работает...

Что, правда? Зачем же тогда в PrototypeJs написано:

window.parseFloat(window.opera.version()) < 9.5 ? document.body : document.documentElement

Да и в любом известном фреймворке есть что-то подобное? Они все глупые там наверно. А вы умный.

Ой как давно.

Я что так не понятно пишу?

Правда? Ух, ты!
Знаете, много косяков полезет, когда вы начнете применять эти функции к реальным сайтам.

Я пишу свои наблюдения, а не утверждение, того, что без разницы что использовать. Когда эти значения изменятся - тогда и поговорим. Никто никогда не сможет предугадать заранее какое свойство предпочтительней, в том числе и парни из prototype. А пока это всё работает - это кроссбраузерно.

Это было приведено для понимания, что после появления новых версий - ничего не упало. Для меня это только + к этим ф-циям.

Нет, понятно. Просто немножко не дописываете:)