jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

update

Browse source
This commit is contained in:
Ilya Kantor 2014-11-16 01:40:20 +03:00
parent 962caebbb7
commit 87bf53d076
1825 changed files with 94929 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

43
2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.md Normal file
View file

@ -0,0 +1,43 @@
Есть два варианта.
<ol>
<li>Можно использовать свойство `elem.style.cssText` и присвоить стиль в текстовом виде. При этом все присвоенные ранее свойства `elem.style` будут удалены.</li>
<li>Можно назначить подсвойства `elem.style` одно за другим. Этот способ более безопасен, т.к. меняет только явно присваемые свойства.</li>
</ol>
Мы выберем второй путь.
[edit src="solution"]Открыть решение[/edit]
**Описание CSS-свойств:**
```css
.button {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 2px groove green;
display: block;
height: 30px;
line-height: 30px;
width: 100px;
text-decoration: none;
text-align: center;
color: red;
font-weight: bold;
}
```
<dl>
<dt>`*-border-radius`</dt>
<dd>Добавляет скругленные углы. Свойство присваивается в вариантах для Firefox `-moz-...`, Chrome/Safari `-webkit-...` и стандартное CSS3-свойство для тех, кто его поддерживает (Opera).</dd>
<dt>`display`</dt>
<dd>По умолчанию, у `A` это свойство имеет значение `display: inline`.</dd>
<dt>`height`, `line-height`</dt>
<dd>Устанавливает высоту и делает текст вертикально центрированным путем установки `line-height` в значение, равное высоте. Такой способ центрирования текста работает, если он состоит из одной строки.</dd>
<dt>`text-align`</dt>
<dd>Центрирует текст горизонтально.</dd>
<dt>`color`, `font-weight`</dt>
<dd>Делает текст красным и жирным.</dd>
</dl>

37
2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html Executable file
View file

@ -0,0 +1,37 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<body>
<div>
Кнопка:
<!-- создайте элемент и расположите его тут -->
</div>
<script>
var a = document.createElement('a');
a.className = 'button';
a.appendChild(document.createTextNode('Нажми меня'));
a.href = '/';
var s = a.style
s.MozBorderRadius = s.WebkitBorderRadius = s.borderRadius = '8px';
s.border = '2px groove green';
s.display = 'block';
s.height = '30px';
s.lineHeight = '30px';
s.width = '100px';
s.textDecoration = 'none';
s.textAlign = 'center';
s.color = 'red';
s.fontWeight = 'bold';
var div = document.body.children[0];
div.appendChild(a);
</script>
</body>
</html>

17
2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html Executable file
View file

@ -0,0 +1,17 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<body>
<div>
Кнопка:
<!-- создайте элемент и расположите его тут -->
</div>
<script>
// .. ваш код
</script>
</body>
</html>

33
2-ui/1-document/14-styles-and-classes/1-round-button-javascript/task.md Normal file
View file

@ -0,0 +1,33 @@
# Скругленая кнопка со стилями из JavaScript
[importance 3]
Создайте кнопку в виде элемента `<a>` с заданным стилем, используя JavaScript.
В примере ниже такая кнопка создана при помощи HTML/CSS. В вашем решении кнопка должна создаваться, настраиваться и добавляться в документ при помощи *только JavaScript*, без тегов `<style>` и `<a>`.
```html
<!--+ autorun height="50" -->
<style>
.button {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 2px groove green;
display: block;
height: 30px;
line-height: 30px;
width: 100px;
text-decoration: none;
text-align: center;
color: red;
font-weight: bold;
}
</style>
<a class="button" href="/">Нажми меня</a>
```
**Проверьте себя: вспомните, что означает каждое свойство. В чём состоит эффект его появления здесь?**
[edit src="source" task/]