<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS &#187; манипуляции css</title>
	<atom:link href="http://php.infoniac.ru/tag/%d0%bc%d0%b0%d0%bd%d0%b8%d0%bf%d1%83%d0%bb%d1%8f%d1%86%d0%b8%d0%b8-css/feed/" rel="self" type="application/rss+xml" />
	<link>http://php.infoniac.ru</link>
	<description>Уроки программирования от новичка новичкам</description>
	<lastBuildDate>Mon, 30 Jan 2012 06:24:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Уроки Mootools – Урок 7 – Игра со стилями</title>
		<link>http://php.infoniac.ru/mootools-day7-styles.html</link>
		<comments>http://php.infoniac.ru/mootools-day7-styles.html#comments</comments>
		<pubDate>Sat, 11 Jul 2009 07:06:11 +0000</pubDate>
		<dc:creator>proglammer</dc:creator>
				<category><![CDATA[Mootools]]></category>
		<category><![CDATA[Уроки новичка]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[манипуляции css]]></category>
		<category><![CDATA[программирование]]></category>
		<category><![CDATA[стили]]></category>
		<category><![CDATA[уроки]]></category>

		<guid isPermaLink="false">http://php.infoniac.ru/?p=545</guid>
		<description><![CDATA[На мой взгляд – очень интересный урок, где рассмотрим мы методы работы со стилями. Согласитесь, работать со стилями в современном Web 2.0, очень важно уметь! Вот и будем рассматривать методы и функции получения и изменения свойств стилей «на лету», т.е. пользователь нажал на кнопку, а и не заметил, как свойство стиля и изменилось.
<!--3E4F7FCD31DE5B0811E917A03F5DC187-->]]></description>
			<content:encoded><![CDATA[<!-- google_ad_section_start --><div style="text-align:center;width:100%;margin:10px 0px 10px 0px;"><div style="margin:auto;"><script type="text/javascript"><!--
google_ad_client = "pub-8205915997794532";
/* 728x90, создано 08.12.10 */
google_ad_slot = "3730215141";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div></div><div style="width:100%;min-width:100%;"><h2>Основы</h2>
<h3>Функция .setStyle();</h3>
<p>Эта функция позволяет установить свойства стиля элемента. Все что нужно сделать, это добавить <strong>.setStyle()</strong> через сивмол точки («.») в конец строки с селектором (или к соответствующей переменной), и она  изменит свойства стилей одного элемента или целого массива элементов.</p>
<p><span id="more-122"></span></p>
<style>
#playstyles {
	width: 200px;
	height: 200px;
	background-color: #eeeeee;
	border: 3px solid #dd97a1;
}
</style>
</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//определяем селектор</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//добавляем функцию .setStyle</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//задаем необходимое свойство стиля и его значение</span>
$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'body_wrap'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">setStyle</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'#eeeeee'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

$$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'.class_name'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">setStyle</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'#eeeeee'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<div class="wp_syntax">
<div class="code">
<pre class="html4strict" style="font-family: monospace;"><span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"body_wrap"</span>&gt;</span>

    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"class_name"</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>
    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"class_name"</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>

    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"class_name"</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>
    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"class_name"</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>

<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span></pre>
</p></div>
</div>
<h3>.getStyle();</h3>
<p>Если понимаешь хоть как-то по английски, тут все понятно: функция получает значение свойства стиля элемента (как-то много родительного падежа <img src='http://php.infoniac.ru/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  ). </p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//вначале объявляем переменную, в которой будет содержаться значение параметра стиля</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> styleValue <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(51, 102, 204);">'body_wrap'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">getStyle</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>Если бы мы прогнали этот код по предыдушим HTML строкам, переменная <strong>styleValue</strong> получила бы значение <em>‘#eeeeee’</em>.</p>
<h2>Получение и установка нескольких значений стиля</h2>
<h3>setStyles();</h3>
<p><strong>.setStyles();</strong>, как скорее всего уже понял народ, хоть немного понимающий английский, позволяет применить несколько значений стиля одновременно к одному элементу или к целому массиву элементов. Синтаксис функции <strong>.setStyles();</strong> немного отличается от синтаксиса остальных схожих функций и это сделано лишь для того, чтобы она позволяла работать с несколькими значениями стилей одновременно.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//начинаем мы с того, что создаем селектор, к которому добавляем, как всегда через точку, функцию</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//в данном случае .setStyles();</span>
$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'body_wrap'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">setStyles</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span>
    <span style="color: rgb(0, 102, 0); font-style: italic;">//шаблон, которого нужно придерживаться: 'свойство': 'значение',</span>

    <span style="color: rgb(51, 102, 204);">'width'</span><span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">'1000px'</span><span style="color: rgb(51, 153, 51);">,</span>
    <span style="color: rgb(51, 102, 204);">'height'</span><span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">'1000px'</span><span style="color: rgb(51, 153, 51);">,</span>
    <span style="color: rgb(0, 102, 0); font-style: italic;">//ВАЖНО: после последнего значения запятую ставить НЕ НУЖНО!</span>

    <span style="color: rgb(0, 102, 0); font-style: italic;">//это важно для кроссбраузерности приложения</span>
    <span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">'#eeeeee'</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p><strong>Примечание</strong>:  Вообще не обязательно всегда заключать название свойства стиля в единичные кавычки. Они нужны только тогда, когда в названии свойства есть дефис (-), как, например, в свойстве <em>font-size</em>. Но для того, чтобы исключить возникновение проблем по причине не поставленной кавычки, лучше приучить себя к кавычкам. Потом искать долго, если что <img src='http://php.infoniac.ru/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> .</p>
<p><strong>Еще одно примечание</strong>: эта функция предоставляет большую гибкость при определении значений свойств (таких как ‘200px’ или ‘#ffffff’). Помимо возможности передачи обычных текстовых строк, можно также передавать числа без кавычек (которые будут интепретированы как пиксели – px – в большинстве случаев) и переменные:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//эта строчка передает переменной firstBackgroundColor значение в формате ТЕКСТ '#eeeeee'</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> firstBackgroundColor <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(51, 102, 204);">'#eeeeee'</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//можно задавать в качестве значения переменной другую переменную</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//в данном случае переменная backgroundColor получает значение друго переменной - '#eeeeee'</span>

<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> backgroundColor <span style="color: rgb(51, 153, 51);">=</span> firstBackgroundColor<span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//эта строчка передает переменной divWidth значение в формате ЧИСЛО 500</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> divWidth <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(204, 0, 0);">500</span><span style="color: rgb(51, 153, 51);">;</span>

$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'body_wrap'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">setStyles</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span>
    <span style="color: rgb(0, 102, 0); font-style: italic;">//в данном случае, переменные - это слова без кавычек</span>
    <span style="color: rgb(51, 102, 204);">'width'</span><span style="color: rgb(51, 153, 51);">:</span> divWidth<span style="color: rgb(51, 153, 51);">,</span>

    <span style="color: rgb(0, 102, 0); font-style: italic;">//числа - это.... это числа без кавычек</span>
    <span style="color: rgb(51, 102, 204);">'height'</span><span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(204, 0, 0);">1000</span><span style="color: rgb(51, 153, 51);">,</span>
    <span style="color: rgb(0, 102, 0); font-style: italic;">//другая перменная</span>
    <span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(51, 153, 51);">:</span> backgroundColor<span style="color: rgb(51, 153, 51);">,</span>

    <span style="color: rgb(0, 102, 0); font-style: italic;">//строки - это ряд символов, заключенных в 'единичные кавычки'</span>
    <span style="color: rgb(51, 102, 204);">'color'</span><span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">'black'</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<h3>.getStyles;</h3>
<p>Эта функция позволяет получать несколько значений свойств стилей за один раз. Она работает немного иначе, чем мы виделли немного выше, а отличается этот метод тем, что он работает с несколькими наборами данных в формате ключа (свойство стиля) и его значения (значение свойства). Такой набор данных называется ОБЪЕКТОМ, а метод <strong>.getStyles();</strong> позволяет легко формировать такие объекты, чтобы потом их также легко использовать.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//вначале нужно объявить переменную для нашего объекта</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//потом создать селектор</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//добавляем метод .getStykes к селектору</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//после чего создаем список названий свойств стиля, разделенных через запятую</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//все названия нужно заключать в 'единичные кавычки'</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> bodyStyles <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'body_wrap'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">getStyles</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'width'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'height'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> 

<span style="color: rgb(0, 102, 0); font-style: italic;">//вначале создаем новую переменную, которая будет содержать значение свойства</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//передаем в переменную определенное свойство; </span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//ключ объекта/массива и будет названием свойства</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//название свойства заключаем в [квадратные скобки]</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//не забываем про 'единичные кавычки' для ключа объекта/массива</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> bgStyle <span style="color: rgb(51, 153, 51);">=</span> bodyStyles<span style="color: rgb(0, 153, 0);">[</span><span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(0, 153, 0);">]</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<h2>Пример</h2>
<p>В этом примере мы потренируемся использовать некоторые методы, рассмотренные в этом уроке, чтобы получать информацию о стилях (<strong>.getStyles();</strong>) и устанавливать свои стили (<strong>.setStyles();</strong>). Обращайте больше внимания не на манипуляции со свойствами стилей, а на структуру кода. Для того, чтобы отделить наши функции от события domready, мы передаем им несколько переменных, которые установленны в самом событии domready. А делается это примерно так: как видно вначале идет объявление переменных с функциями, но при этом видно, что функциям передаются переменные, которые объявляются позже, уже в событии domready, где функции, собственно и вызываются, но уже после объявленных переменных. Что-то вроде того…</p>
<p>Обратите внимания, что собятия click используют анонимные функции. Это дает нам возможность передавать переменные изнутри domready функциям за его пределами. Это может показаться полным бредом на первый взгляд, но пробежав глазами по коду немного ниже, думаю, должно все проясниться.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//обратите внимание, что эта функция имеет параметр "bgColor"</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//эта функция будет использоваться уже внутри собятия domready</span>

<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> seeBgColor <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>bgColor<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
	<span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span>bgColor<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

<span style="color: rgb(0, 153, 0);">}</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> seeBorderColor <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>borderColor<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
	<span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span>borderColor<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

<span style="color: rgb(0, 153, 0);">}</span>
&nbsp;
<span style="color: rgb(0, 102, 0); font-style: italic;">//тут мы используем еще не объявленную переменную playDiv</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//но, так как мы объявим переменную уже в событии domready и</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//и это произойдет до того, как мы вызовим эту функцию, ошибки не будет</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//плюс ко всему, теперь не нужно использовать селектор несколько раз</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//очень полезно когда имеешь дело со сложными селекторами</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> seeDivWidth <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

        <span style="color: rgb(0, 102, 0); font-style: italic;">//снова получаем стиль</span>
        <span style="color: rgb(0, 102, 0); font-style: italic;">//но в отличии от метода .getStyles();, который используем позже в domready,</span>
        <span style="color: rgb(0, 102, 0); font-style: italic;">//тут мы получаем текущее значение параметра стиля</span>
        <span style="color: rgb(0, 102, 0); font-style: italic;">//это обеспечивает точные значение ширины элемента, передаваемые в оповещение alert </span>
        <span style="color: rgb(0, 102, 0); font-style: italic;">//даже когда значения изменяются по ходу работы</span>
		<span style="color: rgb(0, 102, 0); font-style: italic;">//или после того, как событие domready уже имело место</span>

&nbsp;
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> currentDivWidth <span style="color: rgb(51, 153, 51);">=</span> playDiv.<span style="color: rgb(102, 0, 102);">getStyle</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'width'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span>currentDivWidth<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

<span style="color: rgb(0, 153, 0);">}</span>
&nbsp;
&nbsp;
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> seeDivHeight <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> currentDivHeight <span style="color: rgb(51, 153, 51);">=</span> playDiv.<span style="color: rgb(102, 0, 102);">getStyle</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'height'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

	<span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span>currentDivHeight<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span>
&nbsp;
&nbsp;
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> setDivWidth <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

	playDiv.<span style="color: rgb(102, 0, 102);">setStyle</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'width'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'50px'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span>
&nbsp;
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> setBgColor <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

	playDiv.<span style="color: rgb(102, 0, 102);">setStyle</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'#fdd1aa'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span>
&nbsp;
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> setDivHeight <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

	playDiv.<span style="color: rgb(102, 0, 102);">setStyle</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'height'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'50px'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span>
&nbsp;
<span style="color: rgb(0, 102, 0); font-style: italic;">//обратите внимание, что этот параметр на этом этапе может называться как угодно</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//он примет любое значение (буть то элемент или еще что-либо) </span>

<span style="color: rgb(0, 102, 0); font-style: italic;">//при ее запуске из события domready</span>
&nbsp;
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> resetSIZE <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span> <span style="color: rgb(0, 153, 0);">(</span>foo<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
	foo.<span style="color: rgb(102, 0, 102);">setStyles</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span>

		<span style="color: rgb(51, 102, 204);">'height'</span><span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(204, 0, 0);">200</span><span style="color: rgb(51, 153, 51);">,</span>
		<span style="color: rgb(51, 102, 204);">'width'</span><span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(204, 0, 0);">200</span><span style="color: rgb(51, 153, 51);">,</span>
        <span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">'#fdd1aa'</span>

&nbsp;
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span>
&nbsp;
window.<span style="color: rgb(102, 0, 102);">addEvent</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'domready'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

        <span style="color: rgb(0, 102, 0); font-style: italic;">//в этом примере мы часто используем этот селектор, поэтому проще и экономнее сразу</span>
        <span style="color: rgb(0, 102, 0); font-style: italic;">//присвоить его переменной</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> playDiv <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'playstyles'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

&nbsp;
        <span style="color: rgb(0, 102, 0); font-style: italic;">//тут мы создаем объект с несколькими свойствами стиля</span>
&nbsp;
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> bodyStyles <span style="color: rgb(51, 153, 51);">=</span> playDiv.<span style="color: rgb(102, 0, 102);">getStyles</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'border-bottom-color'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> 

&nbsp;
        <span style="color: rgb(0, 102, 0); font-style: italic;">//еще значение стиля можно получить обратившись в объекту со свойствами</span>
        <span style="color: rgb(0, 102, 0); font-style: italic;">//с соответствующим ключем и назначив результат переменной</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> bgColor <span style="color: rgb(51, 153, 51);">=</span> bodyStyles<span style="color: rgb(0, 153, 0);">[</span><span style="color: rgb(51, 102, 204);">'background-color'</span><span style="color: rgb(0, 153, 0);">]</span><span style="color: rgb(51, 153, 51);">;</span> 

&nbsp;
        <span style="color: rgb(0, 102, 0); font-style: italic;">//тут используется анонимная функция чтобы иметь возможность передать параметр вне события domready</span>
&nbsp;
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'bgcolor'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addEvent</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'click'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>

		seeBgColor<span style="color: rgb(0, 153, 0);">(</span>bgColor<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
&nbsp;
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'border_color'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addEvent</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'click'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>

                <span style="color: rgb(0, 102, 0); font-style: italic;">//вместо того, чтобы передавать параметр в доступную переменную,</span>
                <span style="color: rgb(0, 102, 0); font-style: italic;">//его можно вызвать прямо сюда в алерт</span>
		seeBorderColor<span style="color: rgb(0, 153, 0);">(</span>bodyStyles<span style="color: rgb(0, 153, 0);">[</span><span style="color: rgb(51, 102, 204);">'border-bottom-color'</span><span style="color: rgb(0, 153, 0);">]</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

&nbsp;
&nbsp;
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'div_width'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addEvent</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'click'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>

		seeDivWidth<span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
&nbsp;
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'div_height'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addEvent</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'click'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>

		seeDivHeight<span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
&nbsp;
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'set_width'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addEvent</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'click'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>

		setDivWidth<span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
&nbsp;
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'set_height'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addEvent</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'click'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>

		setDivHeight<span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
   	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'set_BgColor'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addEvent</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'click'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>

		setBgColor<span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
&nbsp;
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'reset'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addEvent</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'click'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>

		resetSIZE<span style="color: rgb(0, 153, 0);">(</span>playDiv<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>А теперь HTML код:</p>
<div class="wp_syntax">
<div class="code">
<pre class="html4strict" style="font-family: monospace;"><span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"playstyles"</span>&gt;</span> <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>
    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">br</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;</span>

    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">button</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"bgcolor"</span>&gt;</span>Получить background-color<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">button</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">br</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;</span>
    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">button</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"border_color"</span>&gt;</span>Получить border-bottom-color<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">button</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">br</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;</span>

    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">button</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"div_width"</span>&gt;</span>Получить width<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">button</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">br</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;</span>
    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">button</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"div_height"</span>&gt;</span>Получить height<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">button</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">br</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;</span>

    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">button</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"set_width"</span>&gt;</span>Установить width на 50px<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">button</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">br</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;</span>
    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">button</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"set_height"</span>&gt;</span>Установить height на 50px<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">button</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">br</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;</span>

    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">button</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"set_BgColor"</span>&gt;</span>Поменять background-color<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">button</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">br</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;</span>
    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">button</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"reset"</span>&gt;</span>Сбросить<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">button</span>&gt;</span></pre>
</p></div>
</div>
<p>И небольшой отрезок нужного нам CSS-кода:</p>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family: monospace;"><span style="color: rgb(204, 0, 204);">#playstyles</span> <span style="color: rgb(0, 170, 0);">{</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">width</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">200px</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">height</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">200px</span><span style="color: rgb(0, 170, 0);">;</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">background-color</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(204, 0, 204);">#eeeeee</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">border</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">3px</span> <span style="color: rgb(153, 51, 51);">solid</span> <span style="color: rgb(204, 0, 204);">#dd97a1</span>

<span style="color: rgb(0, 170, 0);">}</span></pre>
</p></div>
</div>
<div id="playstyles"> </div>
<p>
  <button id="bgcolor">Получить background-color</button> – смотрим цвет фона<br />
  <button id="border_color">Получить border-bottom-color</button> – смотрим цвет границы нижней</p>
<p>
  <button id="div_width">Получить width</button> – смотрим ширину<br />
  <button id="div_height">Получить height</button> – смотрим высоту<br />
  <button id="set_width">Установить width на 50px</button> – устанавливаем ширину на 50 пикселей<br />
  <button id="set_height">Установить height на 50px</button> – устанавливаем высоту на 50 пикселей</p>
<p>
  <button id="set_BgColor">Поменять цвет фона</button> – меняем цвет фона на ‘#fdd1aa’<br />
* Замечу, что несмотря на то, что после смены габаритов нашего объекта, кнопки, полчающие эти габариты, получают правильные значения (ширина = длина = 50px), кнопка получения цвета фона не прокатывает. По каким-то причинам (по каким, я не разобрался), код возвращает изначально установленный цвет фона объекта. Потому, будьте осторожны, если придется что-то подбное использоваться в ваших проектах!<br />
  <button id="reset">Сбросить</button>
</p>
<h2>А что же дальше?…</h2>
<p>В 8-м уроке я планирую рассказать о том, как работать с числами, а именно о большинстве методов и функций в Mootools 1.2, предназначенных для работы с числами. Не забудьте <a href="http://feeds.feedburner.com/Beginners-Programming-Training">подписаться на RSS</a>, чтобы первыми прочитать следующий урок!</p>
</div><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://php.infoniac.ru/mootools-day7-styles.html/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

