代码之家 › 专栏 › 技术社区 › Dmitris

需要一些简单的javascript帮助

css html jquery javascript

Dmitris · 技术社区 · 17 年前

我对javascript非常陌生,只是第一次尝试学习。作为一个小练习,我试着做一些简单的事情。

我正在尝试重新定位页面加载时的按钮。我做错了什么?

我希望能得到一些帮助。

我的代码如下:

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

<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>

编辑: 我进入FureBug的错误是:

mytestbutton.style is undefined

4 回复 | 直到 17 年前

Kane Wallmann 17 年前

使用CSS设置位置时,需要指定正在使用的度量值…试试这个:

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

编辑:

还有一个“.mybutton”,当它应该是“mybutton”时。指类和指ID

最后,.childnodes不是一个函数,它是一个属性,因此您不需要(),加上您有空格,因此您需要删除它或使用.childnodes[1]而不是.childnodes[0]。

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

或者你可以直接去

var mytestbutton = document.getElementById("myButton");

harto 17 年前

这里有几个问题。首先,以下内容不起作用:

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

childNodes 不是函数,而是类似数组的对象。应该如下所示:

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

但是,这也不能满足您的需要-作为中的第一个节点 testdiv 是文本节点(由多个空格字符组成)。你可能想要这个:

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

但最简单的解决方案是:

document.getElementById("myButton")

第二,正如另一个答案中提到的,在将CSS样式分配给对象时,需要指定单位。

jrista 17 年前

我强烈建议使用一个优秀的免费javascript框架来处理类似的事情。moootools、jquery、prototype和其他许多工具可以大大简化从javascript动态设置CSS样式的过程,而无需担心一些奇怪的事情,比如必须记住将“px”附加到位置值的末尾等等。像moootools和jquery这样的javascript框架非常轻,但是包含大量非常有用的功能,因此它们绝对值得研究:

// mootools

var el = $("myElement");
el.setStyle("left", 20);
el.setStyle("top", 10);

wombleton 17 年前

假设您希望按钮转到 testdiv 容器,这是您需要的:

<style>
  #myButton {
    position: absolute;
  }

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

请注意,以前的CSS引用了一个具有类 mybutton 而不是具有ID的元素 myButton . 这个 position: relative 给定位上下文 MyBut纽 的绝对位置。

<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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前