码迷,mamicode.com
首页 > Web开发 > 详细

WEB开发中页面相关标签

时间:2016-01-30 18:12:53      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别

     在往同事负责的页面添加我的功能时,页面总是占据屏幕上方很小一部分,我的功能是点击按钮,添加tab页,然后根据浏览器窗口大小调整页面大小。实在是崩溃至极,网上查找资料,才发现就是因为<!DOCTYPE>。  

    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度

    测试代码: 

技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
 <head>
  <title> My Test </title>
  <script language="JavaScript">
 
  function getHeight(){
        document.getElementById("bodyheight").innerText = document.body.clientHeight;
        document.getElementById("documentheight").innerText = document.documentElement.clientHeight;
    }
  </script>
 </head>

 <body style="border:1px red solid;">
    <p>
        <a href="javascript:getHeight()">click here</a>
        <br/>
            document.body.clientHeight = <span id="bodyheight"></span> px
        <br/>
            document.documentElement.clientHeight = <span id="documentheight"></span> px
    </p>
 </body>
</html>
View Code

    IE下测试结果:
    当页面上有DOCTYPE的时候,值为
       document.body.clientHeight = 87 px
       document.documentElement.clientHeight = 935 px
    当没有DOCTYPE时
       document.body.clientHeight = 935 px
       document.documentElement.clientHeight = 935 px

    

    DOCTYPE:
          <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。HTML5 不基于 SGML,所以不需要引用 DTD。
       
2、<meta> 元素       

    <meta name="renderer" content="webkit">
     html打开强制为极速模式

   <meta http-equiv="X-UA-Compatible" content="IE=edge">
        X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式。Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容。
   <meta http-equiv="X-UA-Compatible" content="IE=7" />无
        无论页面是否包含 <!DOCTYPE> 指令,均使用 Windows Internet Explorer 7 的标准渲染模式。

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        http-equiv="Content-Type" 表示描述文档类型
        content="text/HTML; 文档类型mime类型,这里为html,如果JS就是text/javascript,
        charset=utf-8 页面字符集,编码,eg:gb2312,iso-8859-1,utf-8

 

WEB开发中页面相关标签

标签:

原文地址:http://www.cnblogs.com/wonglu/p/5171232.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!