前台设计细节.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;
完整的代码(自己写的:
张伟)
getstylepropertiesacrossdifferentbrowser
#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