`

样式表使用心得

 
阅读更多

style="position:absolute; left:0; height:expression(document.body.clientHeight-104)"

页面调了好久终于出来了,expression先计算再输出!

下面是网上差到的资料,虽然都知道,但是都忘得差不多了,还是记下来以备后用!

IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)


网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
实现代码
复制代码 代码如下:
< !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>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数:获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数,获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>

详细出处参考:http://www.jb51.net/article/19844.htm

分享到:
评论

相关推荐

    CSS(样式表)中文参考手册

    **CSS(层叠样式表)**是网页设计中不可或缺的一部分,它用于定义页面的布局、颜色、字体等视觉样式。CSS让网页设计者能够将内容和表现分离,从而提高网页的可维护性和可访问性。这份"CSS中文参考手册"包含了大量的...

    高仿PS黑色风格QSS样式表开源代码

    今天我们将深入探讨一个特别的前端设计主题——"高仿PS黑色风格QSS样式表开源代码"。QSS(Qt Style Sheets)是Qt库中的一个特性,用于定制Qt应用程序的界面样式,类似于网页开发中的CSS。这种黑色风格的设计,通常被...

    css学习心得内容包括了所有css样式调整

    这包括减少选择器的复杂性、避免使用通配符选择器(*)、合理使用内联样式和外部样式表,以及使用媒体查询来延迟加载非关键资源。有效的CSS组织和优化可以显著提升网页的加载速度和用户体验。 总之,CSS是一个强大...

    使用AutoCAD的心得

    ### 使用AutoCAD的心得与技巧 #### 重要性与核心原则 在当今的建筑设计与工程领域,AutoCAD作为一款强大的计算机辅助设计软件,其重要性不言而喻。然而,仅仅掌握软件的基本操作远远不够,深入理解和应用AutoCAD的...

    autocad 使用心得

    ### AutoCAD使用心得知识点解析 #### 一、AutoCAD绘图的基本原则 1. **清晰性**:确保绘制的图纸能够一目了然地展示设计意图。清晰的图纸有助于快速理解设计内容,避免误解和混淆。为了达到清晰的效果,需要注意...

    CrystalReport使用心得

    17. **隐藏交叉表汇总值**:使用 `GridRowColumnValue("字段名")` 可以控制交叉表中行或列的汇总值是否显示。 18. **数据库源的定制**:“数据库专家”中可以自定义数据源,通过“文件”-&gt;“Options”设置特定的...

    cad使用心得

    标题和描述中的"cad使用心得"指的是作者在长期实践中积累的关于使用CAD软件的心得体会,特别是AUTOCAD这款流行的CAD软件。 在实际工作中,掌握CAD软件并不仅仅是能够按照教程操作,更重要的是能够将其运用到实际...

    CAD使用心得之国家一级设计师十年用CAD心得精髓.doc

    CAD(Computer-Aided Design)是计算机辅助设计的缩写,主要指使用计算机软件进行图形设计。Autodesk的AutoCAD是最常用的CAD...通过不断实践和总结,每位设计师都能形成自己独特的CAD使用心得,提升设计质量和效率。

    XtraReport使用心得

    《XtraReport使用心得》 XtraReports是DevExpress公司推出的一款强大的报表设计工具,它以其丰富的功能、灵活的自定义能力和高效的数据呈现能力在IT行业中备受赞誉。在本文中,我们将深入探讨XtraReports的核心特性...

    CSS样式表规划与管理的经验总结

    本文旨在分享作者在使用XHTML+CSS构建网站过程中关于CSS样式表规划与管理方面的心得体会。 #### 我的CSS管理进化史 起初,在没有明确的规划指导下,作者对于CSS样式的管理采取的是较为随意的方式——根据实际需要...

    关于透明效果的Qt学习心得

    ### 关于透明效果的Qt学习心得 在进行Qt开发时,实现透明效果...总结而言,Qt提供了多种方式来实现透明效果,包括使用`QPalette`、样式表、`QPainter`等工具。开发者可以根据具体需求选择合适的方法来实现所需的效果。

    个人总结的胡宝介seo心得

    - 页面减肥,如使用CSS样式表和外部JS文件,减少HTML代码。 4. Flash和JavaScript处理: - Flash应配合文字描述,以便搜索引擎理解内容。 - JavaScript代码应放在页面底部或外部文件中,避免影响爬虫抓取。 5. ...

    docbook使用心得

    4. **自动化**:通过 XSLT(可扩展样式表语言转换)模板,可以定制输出样式,实现高度自动化。博主可能分享了一些定制样式的技巧。 5. **文档结构**:如何利用 DocBook 元素有效地构建复杂的文档结构,如书籍、章节...

    zencart 模板修改心得3

    - **images/**、**css/**、**javascript/**:分别存放图片资源、样式表和脚本文件,为模板提供视觉与交互支持。 ### 模板修改流程 修改ZenCart模板需要遵循一定的步骤与规则,首先需熟悉其URL编码机制,例如`index...

    网络优化辅助软件-MAPINFO使用心得

    ### 网络优化辅助软件-MAPINFO使用心得与技巧详解 MAPINFO作为一款功能强大的地理信息系统(GIS)软件,在网络优化领域扮演着至关重要的角色。它不仅能够处理复杂的地图数据,还能帮助工程师们进行精确的基站定位、...

    XtraGrid使用心得

    在本文中,我们将深入探讨XtraGrid的使用心得,包括分组、排序、自定义和汉化等核心功能。 首先,XtraGrid 的核心由 GridControl 和 GridView 组成。GridControl 作为容器,不直接显示数据,而是承载 GridView、...

    web笔记心得

    2. CSS(Cascading Style Sheets):CSS是用于控制网页外观和布局的样式表语言。通过CSS,我们可以设置颜色、字体、布局、响应式设计等,使网页更具吸引力并适应不同设备。 3. JavaScript:JavaScript是一种强大的...

    GridView或DataGrid 固定表头,滚动数据的例子学习心得

    标题中的"GridView或DataGrid 固定表头,滚动数据的例子学习心得"指的是一种技术技巧,用于解决上述问题。主要方法是通过CSS样式和JavaScript来实现。首先,利用`table-layout:fixed`属性,可以固定表格布局,使得...

    时钟走表算法的实现vc++心得

    ### 时钟走表算法的实现与VC++心得 #### 一、时钟走表算法简介 时钟走表算法通常是指在计算机编程领域中,模拟一个时钟指针运动的过程,通过编程来控制时钟指针(如时针、分针、秒针)按照真实世界中的时钟规律...

Global site tag (gtag.js) - Google Analytics