Нужна помощь с простым JavaScript - PullRequest
Новая
       6

Нужна помощь с простым JavaScript

1 голос
/ 22 июля 2009

Я очень плохо знаком с JavaScript и делаю только свои первые попытки учиться. В качестве небольшого упражнения я стараюсь что-то простое.

В значительной степени я пытаюсь изменить положение кнопки, которая отображается при загрузке страницы. Что я делаю не так?

Буду признателен за помощь.

Мой код ниже: 

<style type="text/css">
.mybutton{
position:absolute;
}

JavaScript: 

<script type="text/javascript">
            window.onload=function(){
                var mytestdiv = document.getElementById("testdiv");
                var mytestbutton = document.getElementById("testdiv").childNodes()[0];

                var y = mytestdiv.offsetWidth;
                var x = mytestdiv.offsetHeight;

                mytestbutton.style.right = x;
                mytestbutton.style.top = y;
            }
        </script>

И мой очень простой HTML: 

<body>
        <div id="testdiv" style="width:500px;border:solid #000000">
            <input type="submit" id="myButton" value="TestMe">
        </div>
    </body>

Edit: Ошибка, которую я получаю в furebug: 

mytestbutton.style is undefined

Ответы [ 4 ]

5 голосов
/ 22 июля 2009

При настройке позиции с помощью CSS вы должны указать, какое измерение вы используете ... попробуйте это: 

mytestbutton.style.right = x + "px";
mytestbutton.style.top = y + "px";

EDIT:

Также у вас есть ".mybutton", когда он должен быть "#mybutton". относится к классам, а # относится к идентификаторам

и, наконец, .childNodes не является функцией, это свойство, поэтому вам не нужно (), плюс у вас есть пробел, поэтому вам нужно либо удалить его, либо использовать .childNodes [1] вместо .childNodes [0]. 

var mytestbutton = document.getElementById("testdiv").childNodes[1];

В качестве альтернативы вы можете просто пойти 

var mytestbutton = document.getElementById("myButton");
4 голосов
/ 22 июля 2009

Здесь есть пара проблем. Во-первых, не сработает следующее: 

document.getElementById("testdiv").childNodes()[0]

childNodes это не функция, а массивоподобный объект. Это должно быть похоже на следующее: 

document.getElementById("testdiv").childNodes[0]

Тем не менее, это не будет делать то, что вы хотите, так как первый узел в testdiv является текстовым узлом (состоящим из нескольких пробелов). Вы, вероятно, хотите это: 

document.getElementById("testdiv").childnodes[1]

но самое простое решение таково: 

document.getElementById("myButton")

Во-вторых, как уже упоминалось в другом ответе, вам нужно указать единицы при назначении CSS-стилей для объекта.

1 голос
/ 22 июля 2009

Если вы хотите, чтобы кнопка находилась в правом верхнем углу контейнера testdiv, это то, что вам нужно: 

<style>
  #myButton {
    position: absolute;
  }

  #testdiv {
    height: 2em;
    position: relative;
    width:500px;
    border:solid #000000;
  }
</style>

Обратите внимание, что ваш предыдущий css ссылался на элемент с классом mybutton вместо элемента с идентификатором myButton. position: relative задает контекст позиционирования для абсолютной позиции myButton. 

<script>
  var button = document.getElementById('myButton');
  button.style.top = 0;
  button.style.right = 0;
</script>

Вы также должны заметить, что ваши x и y поменялись местами в исходном вопросе - вы смещались по оси Y на ширину, а на оси X на высоту.

И HTML: 

<body>
    <div id="testdiv">
            <input type="submit" id="myButton" value="TestMe">
    </div>
</body>
1 голос
/ 22 июля 2009

Я настоятельно рекомендую использовать одну из замечательных бесплатных платформ javascript для обработки подобных вещей. MooTools, JQuery, Prototype и многие другие могут значительно упростить процесс динамической установки стилей CSS из javascript, не заботясь о причудливых вещах, таких как необходимость помнить «px» до конца значений позиции и т. Д. , Javascript-фреймворки, такие как MooTools и JQuery, очень легкие, но содержат массу очень полезных функций, поэтому их определенно стоит изучить: 

// mootools

var el = $("myElement");
el.setStyle("left", 20);
el.setStyle("top", 10);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...