Отправляет email-рассылки с помощью сервиса Sendsay

Секреты программирования

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Раскрутка сайта: полезные штуки :)" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
code guru

Статистика

0 подписчиков
0 за неделю
←   Все выпуски   →

Секреты программирования - 'Динамические стили' в JavaScript


Уважаемые подписчики!

Сегодняшняя тема - "Динамические стили" в JavaScript.
Обычно для объявления стилей в хтмл-файле используется тег link, например, 
<link rel="stylesheet" type="text/css" href="green.css">

или блок
<style>...</style>, например,

<style>
 .rshift { position:relative; left:20px; }
 .butsm { width:16px; height:16px; font-size:6pt; }
<style>
Однако, если стили хранятся в базе данных и внешний вид тегов документа зависит от различных параметров, то удобнее устанавливать стили элемента напрямую. Например, есть некий элемент <div id="andr"> </div> и есть некоторый стиль, описываемый как "font-size:9pt; color:#ff00ff;". Первая идея - с помощью функции getElementById найти элемент с идентификатором "andr" и выполнить присваивание obj.style=""font-size:9pt;" color:#ff00ff;"
Однако это приведет к ошибке выполнения, поскольку obj.style - объект, а не строка. Нужно поступить хитрее - разбить стиль на сегменты, разделенные точкой с запятой, в каждом сегменте выделить ключ и значение, использовать ключ как поле объекта "стиль" и присвоить ему значение.
Переход к примеру.

Код примера


function setStyle( id, src )
{
 if( src == "" ) return;
 var arr = src.split( ";" );
 for( var i = 0; i < arr.length; i++ )
 {
  var attr = trimSpaces( arr[ i ] );
  if( attr == "" ) continue;
  var arr2 = attr.split( ":" );
  var key = arr2[ 0 ];
  var val = arr2[ 1 ];
  
  eval( "document.getElementById( '" + id + "' ).style." + key + "='" + val + "'" );
 }
}
//remove leading and trailing spaces, \r, \n
function trimSpaces( buf )
{
 //remove leading spaces
 var len = buf.length;
 while( len > 0 ) 
 {
  var s = buf.charAt( 0 );
  if( s == " " || s == "\n" || s == "\r" ) 
  {
   len --;
   buf = buf.substr( 1, len );
  } 
  else break;
 }
 //remove trailing spaces
 while( len > 0 ) 
 {
  var s = buf.charAt( len - 1 );
  if( s == " " || s == "\n" || s == "\r" ) 
  {
   len --;
   buf = buf.substr( 0, len );
  } 
  else break;
 }
 return buf;
}
function test()
{
 setStyle( "andr", styles[ i %styles.length ] );
 i++;
 return false;
}
var i = 0;
var styles = new Array(
"fontSize:11pt;color:#ff0000;",
"fontSize:13pt;color:#ffff00;",
"fontSize:15pt;color:#00ff00;",
"fontSize:17pt;color:#00ffff;",
"fontSize:19pt;color:#0000ff;",
"fontSize:21pt;color:#ff00ff;"
);
</script>

<body bgcolor="#FFFFFF">

<div id="andr" style=""font-size:21pt">Нажмите" <a href="#" onclick="return test()">'Изменить'</a></div>

</body>

Переход к примеру.

Комментарии

Функция setStyle( id, src ) выделяет элементы стиля в строке src и присваивает их элементу страницы с идентификатором id.
Функция trimSpaces( buf ) удаляет лидирующие и замыкающие пробелы.
Обратите внимание, в стиле div-тега мы используем "font-size", а в JavaScript стиле используем fontSize.
Пример тестировался в браузерах IE 7.0 и Firefox 1.5.

Для улучшения "обратной связи" приглашаю обсудить рассылку на форуме сайта http://www.pvobr.ru в разделе "Программирование". Пишите также, какие темы вы хотите рассмотреть в будущем.

Успехов!
Андрей
В избранное