前台设计细节.docx

前台设计细节.docx

《前台设计细节.docx》由会员分享，可在线阅读，更多相关《前台设计细节.docx（36页珍藏版）》请在冰豆网上搜索。

前台设计细节

1、关于手型光标（css—cursor:

hand;）

在css中定义cursor:

hand;并不能稳定运行，也不是W3C标准，标准的做法cursor:

pointer;

2、关于style、currentStyle、getComputedStyle

样式表分为以下几种：

直接写在tag上的为内嵌样式、写在head元素的style标签中的为内部样式、link引入的为外部样式。

内嵌样式，可以通过Dom.style.样式名称获取，需要注意的时样式名称是驼峰格式

内部样式和外部样式通过style.样式名称是无法获取的，需要通过currentStyle/getComputedStyle来获取，如果硬是使用style的话，你将只能得到一个空值。

如果获取样式时，返回的值是“auto”怎么办？

使用offset+样式名称（首字母大写）

3、样式表的offset、client、scroll和currentStyle属性

offsetHeight=borderTopWidth+clientHeight+scrollbarWidth+borderBottomWidth;

offsetWidth=borderLeftWidth+clientWidth+scrollbarWidth+borderRightWidth;

元素内部实际可用区域（高）=clientHeight-paddingTopWidth-paddingBottomWidth;

元素内部实际可用区域（宽）=clientWidth-paddingLeftWidth-paddingRightWidth;

scrollHeight：

文章的实际高度，不管是否已经用纵向滚动条浏览过。

scrollWidth：

文章的实际宽度，不管是否已经用横向滚动条浏览过。

scrollTop：

用纵向滚动条滚过的高度。

scrollLeft：

用横向滚动条滚过的宽度。

文章未滚过部分（高）=scrollHeight-scrollTop-clientHeight;

文章未滚过部分（宽）=scrollWidth-scrollLeft-clientWidth;

offsetTop：

如果position是absolute，则是相对于body（纵向滚动条滚到最上面，横向滚动条滚到最左面）左上角那个点y轴之间的差。

如果是relative，则是相对于上方或外层元素y轴上的差值。

如果是static（position的默认值），则该属性没有意义。

offsetLeft：

如果position是absolute，则是相对于body（纵向滚动条滚到最上面，横向滚动条滚到最左面）左上角那个点x轴之间的差。

如果是relative，则是相对于上方或外层元素x轴上的差值。

如果是static（position的默认值），则该属性没有意义。

clientTop：

等同于borderTopWidth。

clientLeft：

等同于borderLeftWidth。

currentStyle：

   height：

等同于clientHeight。

   width：

等同于clientWidth。

   left：

等同于offsetLeft。

   top：

等同于offsetTop。

   padding：

共有4个，可以单独指定，也可以一起指定。

该值是指元素border距元素内可用区域之间的距离。

   margin：

共有4个，可以单独指定，也可以一起指定。

该值是指距相邻/周围元素之间的距离。

当元素position为relative时，其4个值分别等同于top、right、bottom和left

4、四种浏览器对clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth和scrollWidth的解释差异

网页可见区域宽：

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

IE（InternetExplorer）、NS（Netscape）、Opera、FF（FireFox）的区别：

clientHeight

四种浏览器对clientHeight的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight

IE、Opera认为offsetHeight=clientHeight+滚动条+边框。

NS、FF认为offsetHeight是网页内容实际高度，可以小于clientHeight。

scrollHeight

IE、Opera认为scrollHeight是网页内容实际高度，可以小于clientHeight。

NS、FF认为scrollHeight是网页内容高度，不过最小值是clientHeight。

简单地说

clientHeight就是透过浏览器看内容的这个区域高度。

NS、FF认为offsetHeight和scrollHeight都是网页内容高度，只不过当网页内容高度小于等于clientHeight时，scrollHeight的值是clientHeight，而offsetHeight可以小于clientHeight。

IE、Opera认为offsetHeight是可视区域clientHeight滚动条加边框。

scrollHeight则是网页内容实际高度。

同理clientWidth、offsetWidth和scrollWidth的解释与上面相同，只是把高度换成宽度即可。

注：

以上也是转的，对自己有点参考而已，有些值要跟据页面方式而定！

我用的Ajax就完全没法用上面的方法定高！

javaScript窗口属性：

网页可见区域宽：

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

在IE、FireFox、Opera下都可以使用

document.body.clientWidth

document.body.clientHeight

即可获得，很简单，很方便。

而在公司项目当中：

Opera仍然使用

document.body.clientWidth

document.body.clientHeight

可是IE和FireFox则使用

document.documentElement.clientWidth

document.documentElement.clientHeight

原来是W3C的标准在作怪啊

">

如果在页面中添加这行标记的话

在IE中：

document.body.clientWidth==>BODY对象宽度

document.body.clientHeight==>BODY对象高度

document.documentElement.clientWidth==>可见区域宽度

document.documentElement.clientHeight==>可见区域高度

注：

在IE中“可见区域”基本不认可body，而必需使用documentElement！

！

！

！

在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高）

获取窗口高宽：

varw=document.documentElement.offsetWidth;

varh=document.documentElement.offsetHeight;

完整的代码（自己写的：

张伟）

#test

{

position:

absolute;

top:

auto;

left:

auto;

width:

190px;

height:

28px;

padding-left:

10px;

border-color:

bisque;

border-width:

1px;

border-style:

groove;

color:

#7fffd4;

font-weight:

bold;

font-size:

24px;

}

#targetDiv

{

position:

absolute;

top:

85px;

left:

200px;

width:

300px;

height:

28px;

padding-left:

10px;

border-color:

bisque;

border-width:

1px;

border-style:

dotted;

color:

#9900ff;

font-weight:

bold;

font-size:

24px;

}

functionrunTest（）

{

vartargetDiv=document.getElementById（"targetDiv"）;

vartestDiv=document.getElementById（"test"）;

targetDiv.innerHTML="topis"+getOffPixel（getStyle（testDiv,"left"））;

}

functiongetStyle（element,styleName）

{

varstyleValue;

if（element.style&&element.style[styleName]!

=""）

{

styleValue=element.style[styleName];

alert（"style:

"+styleValue）;

}

elseif（element.currentStyle）

{

//IE&Maxthonie&FireFoxie

styleValue=element.currentStyle[styleName];

alert（"currentStyle:

"+styleValue）;

}

elseif（window.getComputedStyle）

{

//Maxthon&FireFox

styleValue=window.getComputedStyle（element）

.getPropertyValue（styleName）;

alert（"computedStyle:

"+styleValue）;

}

if（styleValue=="auto"）

styleValue=element["offset"+changeToUpper（styleName）]+"px";

returnstyleValue;

}

functionchangeToUpper（styleName）

{

returnstyleName.charAt（0）.toUpperCase（）+

styleName.substring

（1）.toLowerCase（）;

}

functiongetOffPixel（pixel）

{

returnparseInt（pixel.substring（0,pixel.indexOf（"px"）））;

}

ADivForTest