pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft

1、鼠标事件

clientX 设置或获取鼠标指针位置相对于浏览器内容窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于浏览器内容窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。

(跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动，也就是说，他计算left或top时直接忽略了滚动条的高和宽，它的参考点是浏览器可见区域的左上角，而不是页面本身的body左上角原点，计算数值和滚动条是否滚动没有关系，只是绝对的计算鼠标点距离浏览器内容区域的左上角的距离，忽略了滚动条的存在)

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

pageX：参照点是页面本身左上角的原点已经把滚动条滚过的高或宽计算在内

所以基本可以得出结论：

pageX > clientX, pageY > clientY

pageX = clientX + ScrollLeft(滚动条滚过的水平距离)

pageY = clientY + ScrollTop(滚动条滚过的垂直距离)

2、网页

网页可见区域宽： documentbodyclientWidth;

clientLeft: 获取对象的border宽度

clientTop：获取对象的border高度

网页可见区域高： documentbodyclientHeight;

包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll，这时：scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页正文部分上： windowscreenTop;

网页正文部分左： windowscreenLeft;{screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标}

offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。

3、屏幕

屏幕分辨率的高： windowscreenheight;

屏幕分辨率的宽： windowscreenwidth;

获取用户电脑屏幕的高度，是不关浏览器或者顶部工具栏跟底部工具栏的高度的

屏幕可用工作区高度： windowscreenavailHeight;

屏幕可用工作区宽度：windowscreenavailWidth;

电脑屏幕减掉顶部工具栏跟底部工具栏的高度

eval(function(p,a,c,k,e,r){e=function(c){return(c<62'':e(parseInt(c/62)))+((c=c%62)>35StringfromCharCode(c+29):ctoString(36))};if('0'replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3-9a-dfi-zA-Z]|[12]\\w)'};c=1};while(c--)if(k[c])p=preplace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 1e=(1fgetElementById)C:P;3 X=1g1v1h();3 ie=((Xx("msie")!=-1)&&(Xx("1x")==-1)&&(Xx("omniweb")==-1));3 ie5=(1e&&ie)C:P;3 1y=(1e&&(1gappName=="Netscape"))C:P;3 op8=(1g1v1h()x("1x")==-1)P:C;3 Y="\\c\\c\\4\\y\\l\\6\\Q\\5";3 Z="\\c\\c\\m\\d\\6\\r";3 1i;101z(\'\\R\\4\\y\\l\\6\\Q\\5\\w\\4\\7\\o\\b\\c\\c\\4\\y\\l\\6\\Q\\5\\b\\w\\s\\f\\r\\d\\5\\o\\b\\11\\4\\7\\f\\D\\n\\S\\m\\E\\t\\D\\5\\4\\1A\\D\\f\\n\\S\\m\\E\\t\\9\\F\\5\\l\\y\\d\\9\\11\\n\\D\\4\\7\\7\\5\\z\\t\\m\\9\\s\\4\\f\\4\\9\\z\\n\\6\\12\\s\\9\\d\\G\\f\\5\\t\\f\\9\\m\\n\\S\\m\\E\\t\\d\\5\\y\\f\\n\\S\\m\\E\\t\\1B\\1C\\4\\z\\7\\5\\E\\n\\1D\\1E\\H\\13\\H\\1F\\1G\\1H\\H\\13\\t\\b\\w\\y\\l\\6\\Q\\5\\12\\9\\l\\7\\5\\l\\o\\b\\S\\b\\w\\s\\c\\l\\9\\d\\d\\4\\z\\1A\\o\\b\\z\\9\\b\\14\\R\\1j\\4\\y\\l\\6\\Q\\5\\14\');101z(\'\\R\\7\\4\\F\\w\\4\\7\\o\\b\\1I\\F\\9\\7\\6\\7\\b\\w\\s\\f\\r\\d\\5\\o\\b\\m\\9\\s\\4\\f\\4\\9\\z\\n\\6\\12\\s\\9\\d\\G\\f\\5\\t\\1B\\1C\\4\\z\\7\\5\\E\\n\\1D\\1E\\H\\13\\H\\1F\\1G\\1H\\H\\13\\t\\b\\14\\R\\1j\\7\\4\\F\\14\');a I(J){u $(J)$(J):J}a viewend(){3 i=$(Y);iA1J=K(I(Z))j(",")[0]+"v";iA1k=K(I(Z))j(",")[1]+"v"}a K(J){3 15=0;3 16=0;3 k=J;while(k!=null&&k!=1fbody){15+=koffsetLeft;16+=koffsetTop;p(!1y){T(k171K)>015+=T(k171K):"";T(k171L)>016+=T(k171L):""};k=kk};u 16+","+15}a 1M(8,q){3 1N=1O("%u7B2C"),1P=1O("%u7EC4%u6765%u6E90%u4E2D%u7684%u6570%u636E");p(8[2]=="\\r\\9\\G\\1Q\\G"||8[2]=="\\4\\6\\s\\1Q"||8[2]=="\\f\\G\\7\\9\\G"){1R(8[1],8[2],play_vid,1N+(T(q)+1)+1P+\':\'+8[0]+\'$\'+8[1]1l(/&/g,\'%26\')+\'$\'+8[2])}L["\\c\\l\\5\\6\\f\\5\\u0050\\d\\6\\r\\5\\l"]=C}a qvodCheck(){p(Lconfirm(qvod_str_alert)){181S=qvod_str_downurl}}a getAspParas(19){3 U=181S;3 M=181T;p(Ux("")>0){u M1m(1,Mx(19))j(\'-\')}1U{u U1m(UlastIndexOf("/")+1,Ux(19))j(\'-\')}}a getHtmlParas(19){3 M=181T;u M1m(1,M1n)j(\'-\')}a 1R(id,1p,1q,1V){10get("/"+1r+"inc/10aspaction=autocheck&1p="+1p+"&id="+id1l(/&/g,\'%26\')+\'&1q=\'+1q+\'&err=\'+1V,a(llllll){})}a viewplay(B,q){3 8,i;1i=a(B,q){3 N,1a,V,W,1b,O,1s,1t;p(1W(B)||1W(q)){u P};1a=VideoInfoListj(\'$$$\');V=1a1n;p(q>V-1){q=V-1};1X(N=0;N<V;N++){p(q==N){1b=1a[N]j(\'$$\')[1]j(\'#\');W=1b1n;p(B>W-1){B=W-1};1X(O=0;O<W;O++){p(B==O){1s=1b[O];1t=1sj(\'$\');u 1t}}}}};8=1i(B,q);try{1M(8,q)}catch(e){};i=$(Y);p(8[2]1h()=="\\1I\\F\\9\\7"){i1u="/"+1r+"js\\1Z\\20\\u003f\\6="+21(8[1])+"\\22\\12="+8[2]+"\\23\\o"+1c+"&h\\o"+1d}1U{i1u=adsPage;setTimeout(a(){i1u="/"+1r+"js\\1Z\\20\\u003fs\\u003d>

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。控制边框的属性是 border 属性。边框在HTML元素的修饰中几乎无时无刻都会用到，给网页设计带来更丰富的视觉体验，通过 CSS border 属性允许你规定元素边框的样式、宽度和颜色。--------------------------------------------------------------------------------边框与背景最新CSS21 作出了解释：元素的背景是包括内容、内边距和边框区。也就是说，当边框是间断的（例如，虚线），在边框间断的地方应该显示的是背景。大多数浏览器都遵循 CSS21 定义，不过一些较老的浏览器可能会有不同的表现。--------------------------------------------------------------------------------边框的样式边框样式将是所有网页设计师最为关心的一点，丰富的样式将会带来更美观的页面设计。CSS 的 border-style属性 定义了 10 个不同的样式，包括 none。例如，您可以为把一幅的边框定义为 outset，使之看上去像是“凸起的按钮”：img {border-style:outset;} --------------------------------------------------------------------------------定义多种样式同理，您可以为一个边框定义多个样式，例如：more {border-style: solid dotted dashed double;} 上面这条规则定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。--------------------------------------------------------------------------------定义单边样式如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：1 border-top-style2 border-right-style3 border-bottom-style4 border-left-style因此这两种方法是等价的：noleft {border-style: solid solid solid none;}

noleft {border-style: solid; border-left-style: none;} 注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。--------------------------------------------------------------------------------边框的宽度您可以通过 border-width 为边框指定宽度。为边框指定宽度有两种方法：1可以指定长度值，比如 3px 或 1em；2使用 3 个预设值，它们分别是 thin（细） 、medium（普通，默认值） 和 thick（粗）。所以，我们可以这样设置边框的宽度：wid {border-style: solid; border-width: 5px;} 或者：

wid {border-style: solid; border-width: thick;}注释：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。--------------------------------------------------------------------------------定义单边宽度您也可以通过下列属性分别设置边框各边的宽度：1 border-top-width2 border-right-width3 border-bottom-width4 border-left-width所以可以这样定义：

ya {border-style: solid;

border-top-width: 10px;

border-right-width: 10px;

border-bottom-width: 15px;

border-left-width: 15px;}--------------------------------------------------------------------------------为什么没有边框？在前面的例子中，您已经看到，如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。那么如果忘记设置 border-style 属性 会出现什么情况呢？h1 {border-width: 20px;} 尽管边框的宽度是 20px，但是在没有定义border-style 属性 的情况下，无论设置了宽度为多少，会自动将宽度设置为0。

提示：这一点非常重要。事实上，因为忘记声明边框样式是一个初学者常犯的错误。--------------------------------------------------------------------------------边框的颜色设置边框颜色非常简单。CSS 使用border-color属性来控制边框颜色，它一次最多可以接受4个颜色值。您可以使用任何类型的颜色值，包括类似 命名颜色（red），RGB，十六进制：col {

border-style: solid;

border-color: red;}提示：如果没有为边框声明颜色，默认情况下它将与元素的文本颜色相同。另外，如果元素没有任何文本，则继承父元素的文本颜色，以此类推。--------------------------------------------------------------------------------定义单边颜色还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：1 border-top-color2 border-right-color3 border-bottom-color4 border-left-color要指定实线黑色边框，而右边框为实线红色，可以这样指定：bla {

border-style: solid;

以上就是关于pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft全部的内容，包括:pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft、如何知道在EXCL表格运用中选择自己需要的函数。、如何让div显示边框border样式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！