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'; 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> </div>
<script> <script>
var elem = document.getElementById("elem"); var elem = document.getElementById("elem");
// неверно! // неверно!
//elem.style.width = '100%'; //elem.style.width = '100%';
// верно (решение с CSS) // верно (так как обычный div по умолчанию растягивается во всю ширину)
//elem.style.width = 'auto'; //elem.style.width = 'auto';
// верно (решение с JS), т.к. padding указан px // верно (решение с JS)
// если паддинг в процентах, например 10%, то в IE<9 currentStyle вернет 10%, var bodyWidth = document.body.clientWidth;
// и нужно преобразовать % в px через runtimeStyle
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> </script>