<script type="text/javascript">
//IE5+, Mozilla 1.0+, Opera 7+
function getClientWidth()
{
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}
function getClientHeight()
{
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}
</script>Пример работы кода: показать ширину и высоту рабочей области окнаfunction replaceSelectedText(obj,cbFunc)
{
obj.focus();
if (document.selection)
{
var s = document.selection.createRange();
if (s.text)
{
eval("s.text="+cbFunc+"(s.text);");
s.select();
return true;
}
}
else if (typeof(obj.selectionStart)=="number")
{
if (obj.selectionStart!=obj.selectionEnd)
{
var start = obj.selectionStart;
var end = obj.selectionEnd;
eval("var rs = "+cbFunc+"(obj.value.substr(start,end-start));");
obj.value = obj.value.substr(0,start)+rs+obj.value.substr(end);
obj.setSelectionRange(end,end);
}
return true;
}
return false;
}В качестве аргумента ф-ии передается объект textarea и имя вспомогательной функции, которая принимает в качестве аргумента выделенный текст и возвращает новый текст, который заменит выделенный текст. После замены текста курсор устанавливается в конец выделения.Пример использования://Определяем вспомогательную ф-ю которая
//принимает строку и возвращает её в нижнем регистре
function lCase(s){return s.toLowerCase();}
//заменяем выделенную строку в нижний регистр
replaceSelectedText(document.formName.textareaName,'lCase');Как переместить (установить) текстовый курсор в начало или конец поля ввода textarea или input?IE4+Internet Explorer позволяет нам сделать это при помощи следующих методов :createTextRange() - данный метод создает объект типа TextRange (текстовый диапазон) и позволяет манипулировать текстом. Пустой текстовый диапазон представляет собой курсор - точку ввода.collapse() - данный метод объекта TextRange сужает текстовый диапазон до 0 (превращает его в курсор (в точку ввода)) и устанавливает точку ввода либо в начало диапазона (collapse(true) или просто collapse(), так как значение по умолчанию true) или в конец (collapse(false)).select() - медод объекта TextRange нужный для визуального выделения текста включенного в диапазон. В случае пустого диапазона просто устанавливает текстовый курсор.Пример:function moveCaretToStart(inputObject)
{
if (inputObject.createTextRange)
{
var r = inputObject.createTextRange();
r.collapse(true);
r.select();
}
}
function moveCaretToEnd(inputObject)
{
if (inputObject.createTextRange)
{
var r = inputObject.createTextRange();
r.collapse(false);
r.select();
}
}
function moveCaretToStart(inputObject)
{
if (inputObject.selectionStart)
{
inputObject.setSelectionRange(0,0);
inputObject.focus();
}
}
function moveCaretToEnd(inputObject)
{
if (inputObject.selectionStart)
{
var end = inputObject.value.length;
inputObject.setSelectionRange(end,end);
inputObject.focus();
}
}После замены выделенного текста выделение пропадает. Как сделать так чтобы выделение оставалось?IEif (document.selection)
{
var s = document.selection; //создаем объект из выделенного
var r = s.createRange(); //создаем на основе выделенного объект TextRange
var len = r.text.length; //вычисляем длину первоначального текста
var newText= "сдесь текст который заменит первоначальный";
r.text = newText;
len = newText.length - len; //вычисляем разницу длин нового и первоначального текстов
r = s.createRange(); //восстанавливаем первоначальный текстовый диаппазон
r.moveEnd("character",len); //расширяем или сужаем первоначальный диапазон до нового
r.select(); //выделяем
}
IE4+ Mozilla/Gecko
function getCaretPos(obj)
{
obj.focus();
if(obj.selectionStart) return obj.selectionStart;//Gecko
else if (document.selection)//IE
{
var sel = document.selection.createRange();
var clone = sel.duplicate();
sel.collapse(true);
clone.moveToElementText(obj);
clone.setEndPoint('EndToEnd', sel);
return clone.text.length;
}
return 0;
}
function textareaCurLineNum(obj)
{
var rowHeight = obj.clientHeight/obj.rows;
var curHeight = obj.createTextRange().boundingHeight;
return parseInt(curHeight/rowHeight)+(obj.value!=''?1:0);
}Обратите внимание на то, как ведется подсчет строк: если текстовое поле пусто, то функция вернет 0 (хотя курсор и мигает в первой строке), ибо строк реально нет;<body onselectstart="return false">Mozilla
document.onmousedown=function(){return false}<body style="-moz-user-select: none">JavaScript проверка e-mail на валидностьПеред тем как реализовать JavaScript проверку e-mail адреса на валидность, следует рассмотреть из каких элементов он собственно состоит.E-mail адрес состоит из двух частей разделенных символом "@": "Имя пользователя" @ "доменное имя". Имя пользователя, мы ограничим символами латинского алфавита (a-z), цифрами (0-9), символом подчеркивания "_", дефисом "-" и точкой "." Причем имя пользователя не может начинаться и заканчиваться точкой. Что касается доменного имени, то оно должно удовлетворять следующим критериям: в доменном имени могут присутствовать символы латинского алфавита, цифры и дефис "-"; домен не должен начинаться или заканчиваться дефисом; домен первого уровня(например, com, org, info, ru и т.д.) состоит только из символов латинского алфавита и ограничен длиной от 2 до 4 (или до 6 (домен museum)) символов.Ниже приведена функция для проверки e-mail адреса с помощью регулярного выражения:
/* Функция isValidEmail принимает один или 2 аргумента:
email - электронный адрес для проверки;
strict - необязательный логический параметр (true/false), который
определяет строгую проверку при которой пробелы до и после адреса
считаются ошибкой
В качестве результата функция возвращает либо true, либо false
*/
function isValidEmail (email, strict)
{
if ( !strict ) email = email.replace(/^s+|s+$/g, '');
return (/^([a-z0-9_-]+.)*[a-z0-9_-]+@([a-z0-9][a-z0-9-]*[a-z0-9].)+[a-z]{2,4}$/i).test(email);
}Ну, и при желании можно ввести ограничения на общую длину. Имя пользователя может быть длиной не более 64 символов, а доменное имя до 255 символов (RFC 2821), а вместо a-z0-9_ указать эквивалентый класс символов w (что я не сделал в целях наглядности).Введите email для проверки: <script type="text/javascript">
location.replace("http://www.tigir.com");
</script>Для того чтобы сделать более универсальный редирект с задержкой пропишите в разделе HEAD документа HTML следующий код:<script type="text/javascript">
setTimeout('location.replace("http://www.tigir.com")', 3000);
/*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/
</script>
<noscript>
<meta http-equiv="refresh" content="3; url=http://www.tigir.com">
</noscript>Пояснение. Для универсальности совмещаем два способа: Javascript редирект и redirect html. Для редиректа с задержкой используем функцию setTimeout, а для самого перенаправления используем метод replace, чтобызаменить текщий адрес на новый и тем самым в хистори не оставлять промежуточной страницы. На тот случай если Javascript отключен дублируем перенаправление тэгом META refresh: Однако по возможности лучше использовать перенаправление с помощью серверного скрипта - PHP redirect или используя возможности самого вэб-сервера, так как meta refresh имеет недостатки, а Javascript у некоторых редких пользователей может быть отключен.function decToHex(n){ return Number(n).toString(16); }
function hexTodec (hex){ return parseInt(hex,16); }Часто встречается и описанный ниже вариант КОТОРЫЙ НЕ НУЖНО ИСПОЛЬЗОВАТЬ, ибо не нужно изобретать велосипед! Правльно использовать метод toString(radix), объекта Number, где radix задает основание числа (от 2 до 36), используемое для преобразования. Если параметр radix не указан, то по умолчанию используется 10.//Плохой пример
function poor_decToHex(n)
{
var hexChars = "0123456789ABCDEF";
if (n < 0) return "00";
if (n > 255) return "FF";
var h = Math.floor(n / 16)
var l = n % 16
return hexChars.charAt(h) + hexChars.charAt(l);
}
function getHexRGBColor(color)
{
color = color.replace(/s/g,"");
var aRGB = color.match(/^rgb((d{1,3}[%]?),(d{1,3}[%]?),(d{1,3}[%]?))$/i);
if(aRGB)
{
color = '';
for (var i=1; i<=3; i++) color += Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
}
else color = color.replace(/^#?([da-f])([da-f])([da-f])$/i, '$1$1$2$2$3$3');
return color;
}RGB2HEXfunction rgb2hex(r,g,b)
{
return Number(r).toString(16).toUpperCase().replace(/^(.)$/,'0$1') +
Number(g).toString(16).toUpperCase().replace(/^(.)$/,'0$1') +
Number(b).toString(16).toUpperCase().replace(/^(.)$/,'0$1');
}Как получить отдельно значение красного (Red), зеленого (Green), синего (Blue) цветов из RGB значения цвета? splitRGB, HEX2RGBНапример, из цвета Lime (#00FF00, rgb(0,255,0) или rgb(0%,100%,0%)) получить массив из трех элементов (0,128,0), где нулевой элемент массива соответствует красному, первый зеленому, а второй синему цветам.//hex2rgb это частный случай splitRGB
function splitRGB(color)
{
color = getHexRGBColor(color);
var matches = color.match(/^#?([dabcdef]{2})([dabcdef]{2})([dabcdef]{2})$/i);
if (!matches) return false;
for (var i=1, rgb = new Array(3); i<=3; i++) rgb[i-1] = parseInt(matches[i],16);
return rgb;
}Пример:var rgbArr = splitRGB("FEC400");
var R = rgbArr[0];
var G = rgbArr[1];
var B = rgbArr[2];*Функция splitRGB() использует ф-ю getHexRGBColor(), описанную в вопросе"Как преобразовать значение цвета из rgb(n,n,n) в #HEX?".Math.floor( Math.random( ) * (n+1) )Для генерации целого псевдо-случайного числа в диапазоне от m до n включительно, используется следующая формула:
Math.floor( Math.random( ) * (n - m + 1) ) + mгде m нижняя граница диапазона, а n верхняя граница диапазона.Ниже приведена функция для генерации случайных чисел в диапазоне от m до n:
function randomNumber (m,n)
{
m = parseInt(m);
n = parseInt(n);
return Math.floor( Math.random() * (n - m + 1) ) + m;
}Начальное значение: Конечное значение: /* Array.shuffle( deep ) - перемешать элементы массива случайным образом
deep - необязательный аргумент логического типа, указывающий на то,
нужно ли рекурсивно обрабатывать вложенные массивы;
по умолчанию false (не обрабатывать)
*/
Array.prototype.shuffle = function( b )
{
var i = this.length, j, t;
while( i )
{
j = Math.floor( ( i-- ) * Math.random() );
t = b && typeof this[i].shuffle!=='undefined' ? this[i].shuffle() : this[i];
this[i] = this[j];
this[j] = t;
}
return this;
};Примеры использования:var a = new Array(1,2,3,4,5); alert( a.shuffle() ); alert( ['a','b','c', [1,2,3,4,5], 'D','E','F'].shuffle(true) );//Перемешать включая вложенные массивыКак перенести текст на другую строку в окне alert?Очень просто, используйте символ переноса строки
alert("Диннный текст
который нужно вывести
в несколько строк.");Пример ...Внимание! В html файле текст внутри alert должен идти одной строкой без переносов, так как иначе в некоторых браузерах может возникнуть ошибка "Error: unterminated string literal".var assoc = new Array(); assoc["a"] = "a"; assoc["b"] = "b"; assoc["c"] = "c"; delete assoc["b"];Оператор delete поддерживается начиная с Nav2+, NES3+, IE 4+, Opera3+Замечание: свойство length оператором delete не изменяется, но это для ассоциативных массивов значения не имеет ибо length всегда для них равен 0. Однако для числовых массивов это крайне важно и помните об этом! Почему не меняется свойство length? Потому что Array.length - это не длина массива, а максимальный индекс массива который только был у массива, хотя чаще всего length равно именно длине массива. Кстати свойству length можно присваивать значения, тем самым урезая массив или расширяя массив новыми элементами со значением "undefined".Для удаления элементов из числового массива или вставки элементов с изменением индексов и свойства length используйте метод splice объектаArray.Синтаксис: array.splice(start, delete, arg3,...,argN)Параметры: start - число, задающее индекс, с которого должно начаться удаление элементов и/или вставка новых элементов
var a = new Array(1,2,3,4,5); // a.length равно 5 a.splice(1,2); // начиная с индекса 1 удалить 2 элемента //a = (1,4,5) // a.length равно 3 a.splice(2,0, 9, 8, 7); //добавить в массив начиная с индекса 2 новые элементы, ничего при этом не удаляя // a = (1,4, 9,8,7, 5) a.splice(3,2, -10);//удалить начиная с индекса 3 два элемента и добавить с индекса 3 элемент со значением -10 // a = (1,4,9, -10, 5) a.splice(2);//удалить все элементы начиная с индекса 2 до конца массива //a = (1,4)Как узнать какие свойства есть у объекта (оператор for in)?Как узнать все свойства объекта? В этом поможет оператор for inСинтаксис оператора:
for ( variable in object )
{
code;
}Суть оператора в следующем: при каждой итерации цикла, переменной "variable" присваивается имя очередного свойства объекта "object".Рассмотрим функцию, которая перебирает свойства объекта и возвращает их вместе со значениями в виде строки:function showProperties(obj, objName)
{
var result = "The properties for the " + objName + " object:" + "
";
for (var i in obj) {result += i + " = " + obj[i] + "
";}
return result;
}Посмотреть свойства объекта window.navigator<html>
<head>
<script type="text/javascript">
var imageCheck = false;
</script>
</head>
<body>
<img src="check.jpg" onload="var imageCheck=true;">
</body>
</html>www.tigir.com Картинка загружена?А теперь ложка дегтя: Opera выполняет событие onLoad() даже если картинка не отображается, но находится в кэше, т.е. была ранее загружена и сохранена в кэше. Надеюсь это временное поведение :-(<script type="text/javascript">
//IE4+, NN4+, Opera5+
function trim(s)
{
return rtrim(ltrim(s));
}
function ltrim(s)
{
return s.replace(/^s+/, '');
}
function rtrim(s)
{
return s.replace(/s+$/, '');
}
</script>Примеры:<html>
<head>
<script type="text/javascript">
function checkAll(oForm, cbName, checked)
{
for (var i=0; i < oForm[cbName].length; i++) oForm[cbName][i].checked = checked;
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="total" value="checkbox" onClick="checkAll(this.form,'checkbox[]',this.checked)">Отметить все
<br>
<input type="checkbox" name="checkbox[]" value="checkbox">1
<br>
<input type="checkbox" name="checkbox[]" value="checkbox">2
<br>
<input type="checkbox" name="checkbox[]" value="checkbox">3
</form>
</body>
</html>Как выбрать все значения в ячейках таблицы (как обойти таблицу по ячейкам)?Задача: имеется таблица с атрибутом id="idWalkTable" и требуется обойти все ряды, а в них все ячеки и выветси их содержимое.<script type="text/javascript">
var table = document.getElementById('idWalkTable');
var trList= table.getElementsByTagName('tr');
for (var i=0;i<trList.length;i++)
{
var tdList = trList[i].getElementsByTagName('td');
for (j=0;j<tdList.length;j++)
{
alert('trList['+i+'] tdList['+j+'].innerHTML='+tdList[j].innerHTML);
}
}
</script>getElementById - Возвращает элемент с заданным идентификатором.location.replace("http://www.tigir.com/2.html");Как узнать/изменить значение атрибута class элемента (свойство className)?Javascript может получить доступ к атрибуту class элемента через свойство "className". Однако, следует иметь ввиду, что элементу можно задать не один класс, а сразу несколько, отделённых друг от друга пробелом.Пример: ..., показывает, что элементу span назначено два класса (bigText и greenText) .Ввиду вышесказанного, нельзя использовать простое присваивание, типа: elem.className = "greenText", чтобы не затереть другие возможные значения, и следует новое значение, добавить к уже имеющимся через пробел (хотя если вы уверены, что свойство className пусто, то конечно же можно использовать и простое присваивание).var elem = document.getElementById(elemId);
elem.className += " greenText";//добавляем новый класс к элементу
elem.className.replace(/greenText/, ' ');//удаляем класс greenText из списка классов, назначенных элементу
if (elem.className.match(/greenText/) { ... }//проверяем назначен ли класс greenText элементуДля проверки наличия класса и удаления используется регулярное выражение: /greenText/, где - это специальная конструкция (метасимвол) обозначающая границу слова, т.е регулярное выражение ищет строку greenText, которая является самомтоятельным словом, а не частью другого слова (под словом понимается строка без разделителей: пробелов, знаков пунктуации и т.п.). Использование метасимвола здесь в самый раз, но есть одно НО, не все браузеры его понимают (например, Opera 6 и ниже). Поэтому, если нужна поддержка таких "кривых" и старых браузеров, то следует заменить регулярное выражение "/имя класса/", на менее изящное "/(^| )имя класса($| )/".*IE4+, Gecko, Opera7+ ... понимают как положено.function myFunc(s)
{
if (typeof s == "undefined") s = "default value for s";
alert(s);
}Как подавить сообщения браузера об ошибках Javascript?Для этого воспользуемся событием onerror объекта window.<script type="text/JavaScript"> //подавить все сообщения об ошибках JavaScript window.onerror=null; </script>или можно назначить в качестве обработчика этого события функцию, возвращающую true для подавления сообщения об ошибке
<script type="text/JavaScript">
function myErrHandler()
{
... //здесь выполняем нужные нам действия
//Чтобы подавить стандартный диалог ошибки JavaScript,
//функция должна возвратить true
return true;
}
//назначаем обработчик для события
window.onerror = myErrHandler;
</script>Во время возникновения ошибки вызывается обработчик события и ему передаются следующие параметры: текст сообщения, URL, номер строки с ошибкой. Для того чобы ими воспользоваться объявите их в качестве аргументов при описании функции обработчика: function myErrHandler(msg, url, lno){...}.Обратите внимание на то, что все что расположено в скрипте после кода вызвавшего ошибку, выполняться не будет!function getBodyScrollTop()
{
return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}
function getBodyScrollLeft()
{
return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
}* На заметку: методы scrollBy(numHorz, numVert) и scrollTo(numX, numY)так же позволяют прокуручивать содержимое объекта. scrollBy(numHorz, numVert) - прокручивает на указанное смещение от текущего положения (numHorz, numVert могут принимать положительные, отрицательные значения, а так же 0 для того чтобы отсавить положение без изменения). scrollTo(numX, numY) - прокручивает содержимое к определенной позиции. Например: window.scrollBy(0,-10); //подняться вверх на 10 пикселейВ чем разница, различия между outerText и innerText, чем они отличаются?Разберемся со свойствами на примере тэга SPAN (он выделен цветом), который заключен в тэге P:Привет, незнакомец!Абзац изнутри:Привет, незнакомец!
outerText = незнакомец<a href="..." onfocus="this.blur()">...</a>Однако помните, убирая таким образом фокус с элемента вы затрудняете передвижение по документы с помощью клавиши Tab.
function getBodyScrollTop()
{
return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}
function getBodyScrollLeft()
{
return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
}Как узнать ширину и высоту всей страницы вместе со скроллингом, а не только её видимой части?//Размер документа по вертикали
function getDocumentHeight()
{
return (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight;
}
//Размер документа по горизонтали
function getDocumentWidth()
{
return (document.body.scrollWidth > document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth;
}Как узнать координаты центра окна с учетом скроллинга?function getClientCenterX()
{
return parseInt(getClientWidth()/2)+getBodyScrollLeft();
}
function getClientCenterY()
{
return parseInt(getClientHeight()/2)+getBodyScrollTop();
}Функции getClientWidth, getClientHeight и getBodyScrollLeft, getBodyScrollTop определены выше.window.resizeBy(-100, 200);//Уменьшить ширину окна на 100 пикселей и увеличить высоту на 200 window.resizeBy(0, 50);//Ширину не менять, а высоту окна увеличить 50 пикселей window.resizeTo(400,300);//Установить конкретные значения ширины и высоты, соответственно 400 на 300 пикселейСледует заметить, что изменение размеров окна может быть запрещено в настройках браузера.
window.moveTo(0, 0); window.resizeTo(screen.availWidth, screen.availHeight);Следует заметить, что перемещение и изменение размеров окна могут быть запрещены в настройках браузера. И не стоит злоупотреблять методами для перемещения и изменения размеров окна, пользователю это может мешать! Подходите с умом к их использованию.
var myWin = window.open("page.html", "", "fullscreen");Работет только в IE. Gecko просто максимизирует окно.Если вы не хотите "достать" пользователя, то не используйте это.function getElementPosition(elemId)
{
var elem = document.getElementById(elemId);
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var l = 0;
var t = 0;
while (elem)
{
l += elem.offsetLeft;
t += elem.offsetTop;
elem = elem.offsetParent;
}
return {"left":l, "top":t, "width": w, "height":h};
}
pos = getElementPosition("myDiv");
var left = pos.left;
var top = pos.top;
...Не получается обратиться к свойствам другого фрейма (окна). Что делать?Получить доступ к фрейму (окну) со страницей загруженной с чужого сайта (домена) невозможено по соображениям безопасности. Однако, в случае, когда странички лежат на разных поддоменах одного домена, например, a.site.com и b.site.com, и вы имеете доступ к страницам на этих поддоменах, то пропишите на страницах из обоих поддоменах следующее:document.domain="site.com";.function startPart()
{
// Выполняем нужные нам действия
...
//через 5 секунд запустить endPart
setTimeout("endPart()", 5000);
}
function endPart()
{
//выполняем оставшиеся действия после задержки
}Суть заключается именно в setTimeout, а реализации могут быть и другими. Например, можно использовать одну функцию, но передавать ей параметр, который будет сообщать какую часть кода выполнять.String.prototype.pad = function(l, s, t)
{
if ((l -= this.length) > 0)
{
if (!s) s = " ";//по умолчанию строка заполнитель - пробел
if (t==null) t = 1;//по умолчанию тип заполнения справа
s = s.repeat(Math.ceil(l / s.length));
var i = t==0 ? l : (t == 1? 0 : Math.floor(l / 2));
s= s.substr(0, i) + this + s.substr(0, l - i);
return s;
}
else return this;
}
//повторить заданную строку n раз
String.prototype.repeat = function(n)
{
return new Array( n + 1 ).join(this);
}Я хочу получить значение CSS свойства, но возвращается пустая строка. Например, хочу узнать цвет текста элемента и пишу document.getElementById("elemId").style.color, а результат пустая строка. Что делать?Объект style элемента (document.getElementById("elementId").style), содержит ТОЛЬКО ТЕ значения, которые были заданны явно в атрибуте style в тэге элемента или были предварительно назначены через скрипт. Если Вы задаёте CSS свойства через тэг или внешние листы стилей, то они не будут присутствовать в объекте style элемента.Возникает вопрос, как узнать вычисленное значение свойства элемента, если оно не задано в атрибуте style элемента и не было инициализировано через скрипт?Воспользуйтесь функцией (работает начиная с NN 6, IE 5, Opera 7):function getElementComputedStyle(elem, prop)
{
if (typeof elem!="object") elem = document.getElementById(elem);
// external stylesheet for Mozilla, Opera 7+ and Safari 1.3+
if (document.defaultView && document.defaultView.getComputedStyle)
{
if (prop.match(/[A-Z]/)) prop = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
return document.defaultView.getComputedStyle(elem, "").getPropertyValue(prop);
}
// external stylesheet for Explorer and Opera 9
if (elem.currentStyle)
{
var i;
while ((i=prop.indexOf("-"))!=-1) prop = prop.substr(0, i) + prop.substr(i+1,1).toUpperCase() + prop.substr(i+2);
return elem.currentStyle[prop];
}
return "";
}
var color = getElementComputedStyle("elemID", "color");
var elem = document.getElementById("elemID");
var bg = getElementComputedStyle(elem, "background-color");
//или так
var bg = getElementComputedStyle(elem, "backgroundColor");Как узнать координаты мыши (положение курсора мыши) относительно окна документа?Поводите мышкой по коду функции ниже и смотрите при этом на строку состояния.IE5+, Mozilla/Gecko, Opera 7+function mousePageXY(e)
{
var x = 0, y = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY)
{
x = e.pageX;
y = e.pageY;
}
else if (e.clientX || e.clientY)
{
x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"x":x, "y":y};
}Функция возвращает объект со свойствами x, y, определяющими координаты курсора.Пример использования:document.onmousemove = function(e){var mCur = mousePageXY(e); window.status = "X:"+mCur.x+" - Y:"+mCur.y;};Как узнать координаты мыши (положение курсора мыши) внутри абсолютно позиционированного элемента?function mouseLayerXY(e)
{
if (!e) {e = window.event; e.target = e.srcElement}
var x = 0;
var y = 0;
if (e.layerX)//Gecko
{
x = e.layerX - parseInt(getElementComputedStyle(e.target, "border-left-width"));
y = e.layerY - parseInt(getElementComputedStyle(e.target, "border-top-width"));
}
else if (e.offsetX)//IE, Opera
{
x = e.offsetX;
y = e.offsetY;
}
return {"x":x, "y":y};
}Функция возвращает объект со свойствами x, y, определяющими координаты курсора.Функция getElementComputedStyle описывалась ранееfunction getRadioGroupValue(radioGroupObj)
{
for (var i=0; i < radioGroupObj.length; i++)
if (radioGroupObj[i].checked) return radioGroupObj[i].value;
return null;
}
var v = getRadioGroupValue(document.formName.radioName);Если не отмечен ни один элемент, функция вернет null.
String.prototype.delayingWrite = function(obj, delay)
{
if (this.length>0)
{
if (typeof obj == 'string') obj = document.getElementById(obj);
obj.innerHTML += this.charAt(0);
s = this.substr(1);
if (s) setTimeout(function(){s.delayingWrite(obj, delay);},delay);
}
}Пример: "Вот такая печатная машинка!".delayingWrite('divID',50);Обращение к родительскому окну из дочернегоДопустим есть основное окно которое открывает дочернее, используяwindow.open(). Для обращения к родительскому окну, в дочернем существует объект window.opener, который ссылается на объект windowродителя. Рассмотрим пример (перезагрузить родительское окно из дочернего):/*Этот код находится в дочернем окне. Если родительское окно открыто, перегружаем его */ if(window.opener) window.opener.location.reload();Округление до N знаков после запятойДля округления в Javascript вещественного числа до N знаков после запятой воспользуемся методом toFixed объекта Number:
(3.2489).toFixed(2); //3.24 Math.PI.toFixed(4); //3.1416 - число π с 4 знаками после запятойМетод toFixed возвращает число в виде строки с заданным числом цифр после запятой.