| 
| gliba 17.03.2007 22:20
Обычно для объявления стилей в хтмл-файле используется тег 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,
,
function trimSpaces( buf )
{
//remove leading spaces
var len = buf.length;
while( len > 0 )
{
var s = buf.charAt( 0 );
if( s == " " || s == "
" || s == "
" )
{
len --;
buf = buf.substr( 1, len );
}
else break;
}
//remove trailing spaces
while( len > 0 )
{
var s = buf.charAt( len - 1 );
if( s == " " || s == "
" || s == "
" )
{
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.
 |