1. 爱易网页
  2. HTML教程
  3. 把style写在<style>和标签后面的区别,该如何处理

把style写在<style>和标签后面的区别,该如何处理

日期：2014-05-17　 浏览次数：20841 次

把style写在<style>和标签后面的区别
一个简单的程序   按键，显示DIV的位置。
写出主要代码就是了。

<script>
function   Info(){
var   s   =   document.getElementById( "Mydiv ");
alert(s.style.top);
}
</script>

方法一：把div的样式写在标签后面

<body>
<div   id= "Mydiv "   style= " "position:absolute;   top:100px;   left:100px;> Hello,world! </div>
<input   type=button   value= "Press "   onclick= "Info() ">
</body>

显示100px

方法二:把div的样式写在 <style> 里面
<style>
#Mydiv{
position:absolute;   top:100px;   left:100px;
}
</style>

<body>
<div   id= "Mydiv "> Hello,world! </div>
<input   type=button   value= "Press "   onclick= "Info() ">
</body>

这个时候显示一片空白

请问，为什么会出现这种情况，CSS是怎样一个运行机制？

------解决方案--------------------
alert(s.offsetTop);
------解决方案--------------------
因为后者没有style属性。用alert(s.currentStyle.top);
------解决方案--------------------
<div id= "Mydiv "> Hello,world! </div>
---------------------------------------------
楼主应该搞清楚ID和CLASS的区别和联系啊！！你把第二种方法的ID换作ＣＬＡＳＳ试试
------解决方案--------------------
应该说是js的动作机制的问题
你试一下以下代码，看看区别就明白了：
<html>
<script>
alert(document.body.innerHTML);
</script>

<body>

haha
</body>
<head> <title> abcdefg </title> </head>
<script>
alert(document.title);
</script>
</html>
//会提示没有对象
<html>

<body>
<script>
alert(document.body.innerHTML);
</script>
haha

</body>
<head> <title> abcdefg </title> </head>
<script>
alert(document.title);
</script>
</html>
//显示 <script> alert(document.body.innerHTML); </script> ，没有haha
<html>

<body>

haha
<script>
alert(document.body.innerHTML);
</script>
</body>
<head> <title> abcdefg </title> </head>
<script>
alert(document.title);
</script>
</html> //这样才有haha
最后一种：
<html>

<body>
<script>
alert(document.title);
</script>
haha

</body>
<head> <title> abcdefg </title> </head>

</html>
//显示空白

相关资料更多>

  1. jsp生成html资料
  2. HTML彻底剖析(1)普通概念
  3. Velocity引擎渲染html格式邮件模版乱码有关问题
  4. 要怎样在一个div中插入多个按钮 老师帮小弟我插了两个按钮到了第三个就不行了
  5. 初学者瞬间入门复杂div+css布局，抛弃float！[兼容IE6，IE7，FireFox]
  6. javascript怎么将10（分）转换为0.10（元）
  7. CSS类及id的规范化命名
  8. HTML教程-HTML简介_Html基础教程_HtmlCss教程
  9. visibility与display的不同？解决方案