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

update task

Browse source
This commit is contained in:
Ilya Kantor 2015-01-28 14:16:35 +03:00
parent baec82c3f3
commit 6eacea0d4f
2 changed files with 11 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
2-ui/1-document/15-metrics/5-expand-element/solution.md
View file

@ -39,5 +39,5 @@ var bodyInnerWidth = bodyClientWidth - parseInt(style.paddingLeft) - parseInt(st
elem.style.width = bodyInnerWidth + 'px';
```
Такое решение будет работать всегда, вне зависимости от типа элемента.
Такое решение будет работать всегда, вне зависимости от типа элемента. Конечно, при изменении размеров окна браузера ширина не адаптируется к новому размеру автоматически, как с `width:auto`. Это недостаток. Его, конечно, тоже можно обойти при помощи событий (изучим далее), но как общий рецепт -- если CSS может решить задачу -- лучше использовать CSS.

22
2-ui/1-document/15-metrics/5-expand-element/solution.view/index.html
View file

@ -32,24 +32,22 @@
</div>
<script>
var elem = document.getElementById("elem");
var elem = document.getElementById("elem");
// неверно!
//elem.style.width = '100%';
// неверно!
//elem.style.width = '100%';
// верно (решение с CSS)
//elem.style.width = 'auto';
// верно (так как обычный div по умолчанию растягивается во всю ширину)
//elem.style.width = 'auto';
// верно (решение с JS), т.к. padding указан px
// если паддинг в процентах, например 10%, то в IE<9 currentStyle вернет 10%,
// и нужно преобразовать % в px через runtimeStyle
var bodyWidth = document.body.clientWidth;
// верно (решение с JS)
var bodyWidth = document.body.clientWidth;
var style = window.getComputedStyle ? getComputedStyle(elem, '') : elem.currentStyle;
var style = getComputedStyle(elem);
var bodyInnerWidth = bodyWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight);
var bodyInnerWidth = bodyWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight);
elem.style.width = bodyInnerWidth + 'px';
elem.style.width = bodyInnerWidth + 'px';
</script>