Форум

dmitry111 · #1 (**permalink**) 14.10.2012, 05:24

Нужно для букмарклета.

При клике на букмарклет в body создается элемент в шапке и вся разметка (независимо от указанных стилей) сдвигается вниз на высоту этого элемента..

Сам я пришел к выводу - невозможно. Но может я ошибаюсь?

bes · #2 (**permalink**) 14.10.2012, 11:15

<button style="position: absolute; left: 0px; top: 0px">click</button>
<script>
document.body.children[0].onclick = function () {
	document.body.style.cssText = 'position: absolute; left: 20px; top: 20px;';
	document.body.insertAdjacentHTML('afterBegin', '<button style="position: fixed; left: 0px; top: 0px">button</button>');
}
</script>

dmitry111 · #3 (**permalink**) 14.10.2012, 19:00

bes,
да, а если в body есть элемент с position fixed?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">

            window.onload = function () {

                document.getElementById("dg").onclick = function () {

                document.body.style.cssText = "position: absolute; top: 20px;";
                document.body.insertAdjacentHTML('afterBegin', '<div style="position: fixed; left: 0; right: 0; top: 0; height: 20px; background-color: #000; width: 98%; margin: auto; z-index: 9999999;"></div>');

                };


            };


    </script>
</head>
<body>
<div style="position: fixed; width: 35px; height: 35px; top: 0; right: 0; left: 0; margin: auto; background-color: #f00;"></div>
<a id="dg"  href="#">блок для букмарклета</a>

</body>
</html>

bes · #4 (**permalink**) 14.10.2012, 19:06

тут наверное остаётся только делать выборку всех этих элементов и менять их позицию

dmitry111 · #5 (**permalink**) 14.10.2012, 19:22

bes,
это может создать слишком большую нагрузку (ведь надо искать по всему DOM), но даже не в этом проблема.
Когда мы изменяет стили у body, его дочерние элементы могут тоже откреагировать и вообще поломать всю верстку

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">

            window.onload = function () {

                document.getElementById("dg").onclick = function () {

                document.body.style.cssText = "position: absolute; top: 20px; width:98%";
                document.body.insertAdjacentHTML('afterBegin', '<div style="position: fixed; left: 0; right: 0; top: 0; height: 20px; background-color: #000; width: 98%; margin: auto; z-index: 9999999;"></div>');

                };


            };


    </script>
</head>
<body>
<div style="position: absolute; width: 35px; height: 35px; top: 0; right: 0; left: 0; margin: auto; background-color: #f00;"></div>
<a id="dg"  href="#">блок для букмарклета</a>

</body>
</html>

bes · #6 (**permalink**) 14.10.2012, 20:29

body схлопывается на содержимом, надо добавить ему width: 98%

dmitry111 · #7 (**permalink**) 15.10.2012, 00:01

bes,
ага, не учел

Форум

Справочник

Discord чат

Курсы javascript