使用javascript修改Div元素
[英]Modify Div Element with javascript
问题描述
My script wont run or the document.getElementById("toMove"); 
我的脚本不会运行或者document.getElementById（“toMove”）; doesn't seem to catch the element. 似乎没有抓住元素。 Its very basic javascript but I cant understand why its not working. 它非常基本的JavaScript，但我不明白为什么它不工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#toMove
{
background-color:lightblue;
position:absolute;
}
</style>
<script>
var elem = document.getElementById("toMove");
elem.style.margin = "600px";
</script>
</head>
<body>
<div id="toMove" style="margin:200px; font-size:26px;"> Hello World</div>
</body>
Thanks 谢谢
5 个解决方案
解决方案1
1 2014-01-19 12:40:32
Close your the tag properly. 正确关闭标签。 Problem is that when your scripts executes your element toMove does not exists in DOM 问题是当你的脚本执行你的元素toMove在DOM中不存在
Wrap your code in window.onload . 将您的代码包装在window.onload 。 The function execute a JavaScript when a page is finished loading. 该页面加载完成后，该函数执行JavaScript。
window.onload = function(){
var elem = document.getElementById("toMove");
elem.style.margin = "600px";
}
OR , Simply write your script at after you HTML declartion 或者 ，只需在HTML声明后编写脚本
解决方案2
1 2014-01-19 12:42:13
The problem is that this script must run once the DOM is ready (all elements rendered in the browser) Wrap the script like described here: 问题是这个脚本必须在DOM准备就绪后运行（浏览器中呈现的所有元素）包装脚本，如下所述：
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it 纯JavaScript相当于jQuery的$ .ready（）如何在页面/ dom准备就绪时调用函数
Or if you use jquery with 或者如果你使用jquery
$('document').ready(function(){});
解决方案3
0 2014-01-19 12:42:26
You must close head tag correctly. 您必须正确关闭标签。
</head>
And also do the code of Satpal. 并且还做了Satpal的代码。
解决方案4
0 2014-01-19 12:43:51
This will work. 这会奏效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#toMove
{
background-color:lightblue;
position:absolute;
}
</style>
</head
<body>
<div id="toMove" style="margin:200px; font-size:26px;"> Hello World</div>
</body>
<script>
var elem = document.getElementById("toMove");
elem.style.margin = "500px";
</script>
</html>
解决方案5
0 已采纳 2014-01-19 12:47:21
There's a couple of reasons why it's not working 有几个原因导致它不起作用
- You need to close the
<head>tag properly您需要正确关闭<head>标记 - The point at which your script runs, the element with the id
toMovedoes not yet exist in the DOM (Document Object Model)您的脚本运行的点，ID为toMove的元素在DOM（文档对象模型）中尚不存在
Solving number 1 should be easy enough, just change </head to </head> . 解决1号应该很容易，只需改变</head to </head> 。 To solve number 2, you need to ensure that the script fires after the element with id toMove exists in the DOM. 要解决数字2，您需要确保在DOM中存在id为toMove的元素之后触发脚本。 You can do this by hooking up your script to fire when the window has finished loading. 您可以通过将窗口连接到窗口加载时触发来执行此操作。 The code below sets up a function to fire when the window has finished loading 下面的代码设置了一个在窗口加载完成后触发的函数
window.onload = function(){
var elem = document.getElementById("toMove");
elem.style.margin = "600px";
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.