51阅读吧 - 为您打造专业优质的文章分享平台!
您的当前位置: 51阅读吧 >

精确定位|【html】HTML精确定位

一篇 : 【html】HTML精确定位

scrollHeight: 获取对象的滚动高度。[www.51jianli.com]

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 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

onMouseover当鼠标经过的时候,触发 = 后面的脚本函数
onMouseout 当鼠标离开 。。
onMouseUP 当鼠标 按下又抬起。。。
onmousemove 当鼠标移动。。
onmousedown 当鼠标按下时。。

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。

我们对前面提到的 offsetParent 作个说明。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。

以上属性在 FireFox 中也有效。

另外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的)





我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置, www.51jianli.com 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 www.51jianli.com 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 www.51jianli.com 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 www.51jianli.com 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。





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 的解释与上面相同,只是把高度换成宽度即可。

说明
以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器

scrollTop 是“卷”起来的高度值,示例:

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = www.51jianli.com ("p");
p.scrollTop = 10;
</script>
由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷,这卷起来的部分就是 scrollTop。

scrollLeft 也是类似道理。

我们已经知道 offsetHeight 是自身元素的宽度,而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

scrollWidth 也是类似道理。

IE 和 FireFox 全面支持,而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。



1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入
元素中的页边距,边框等.

2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.

4.scrollHeight,scrollWidth:
不管有多少对象在页面上可见,他们得到的是整体.

5.style.left:
定位元素与包含它的矩形左边界的偏移量

6.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.

7.style:posLetf:
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em

top,pixelTop,posTOp这几个类比就行了.
LEFT: 为从左向右移的位置,即挂件距离屏幕左边缘的距离;
clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
offsetLeft 返回对象相对于父级对象的布局或坐标的left值,就是以父级对象左上角为坐标原点,向右和向下为X、Y轴正方向的x坐标
pixelLeft 设置或返回对象相对于窗口左边的位置
scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。
clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth:是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。
offsetLeft:Html元素相对于自己的offsetParent元素的位置
scrollLeft:返回和设置当前横向滚动务的坐标值

<input type="button" value="点一下" onclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<script language="javascript">
function move()
{
var d= www.51jianli.com ("d")
a=eval(20)
d.scrollLeft+=a
}
</script>

二篇 : 精确定位访客群体才能让访客来了再来

  精确定位访客群体,给访客权威的答案,让访客才会来了再来。我们都知道,搜索引擎面向的是访客,而我们是通过搜索引擎这个平台将我们的网站展现给访客的。而这也恰恰回到我们网站的建设目的。我们做网站不仅要让搜索引擎青睐更加要让我们的访客群体喜爱。

  我们拿seo这个关键词为例。如下图所示,我们可以看到目前在百度搜索结果排在前几位的分别为站长工具,搜外论坛,百度百科,还有一个是zac的博客。下面我们就根据图中的这几个网站来谈谈网站的精确定位访客群体。

  首先第一个是百度百科的内容,谈到百度百科,很多人肯定都很熟悉,大多数是不了解seo或者是一些初学者都会进入到这个页面,同时百度百科的品牌权威优势,也会让很多搜索者首先选择他。再者其是百度的相关产品,能够排在第一的位置也有一定的关系。

  对于百度百科这个产品笔者个人还是很钦佩他的优化手段的,能够精确的定位自己的访客群体,充分挖掘访客力量,让访客不断的完善其内容,,最重要的一点是对垃圾信息的过滤非常严格,这样也使他的访客体验度得到质的提升。

  排在搜索结果第二位的就是站长工具,首先我们知道使用站长工具的一定是各大站长,seo从业人员,这些相关从业人员每天都需要借助工具进行数据分析,那么这样站长工具就具有很高的访客回头率,同时我们可以看到站长工具的工具种类较为齐全丰富,这样也大大的增加了访客的粘度。同时我们可以看到随着网站数量的不断膨胀,相关站长工具无疑使用量也会不断的提升。

  从站长工具我们可以看到如何定位访客群体,并根据定位来留住访客。这点做论坛的朋友应该多多分析一下,如何针对自己的访客制定留住访客的策略。我们可以针对访客发布一个微博,或者是定期组织活动等等,这些更具不同访客制定的策略有待大家去挖掘。

  排在第三和第四的分别为论坛站点,首先我们还是来谈谈这些论坛门户的访客群体。这些访客可能是SEO的爱好者、从业者,或者只是想借助这些论坛来发布外链的访客等等。那么,我们可以看到SEO论坛的访问者肯定不低于站长工具和百度百科。那么为什么这些平台会屈居在他们后面?笔者分析可能有以下几点原因:

  1、论坛失去了原有的交流目的,沦为很多垃圾外链的集散地,对于这些垃圾外链有时论坛的处理不及时,影响到了用户的体验度。

  2、论坛过多的外链导致权重流失。

  3、内容的权威性不够高,内容多为转载或者是垃圾的内容。

  从上文我们可以了解到当下大多数论坛都容易存在问题,尤其是对于垃圾信息的过滤。这也是论坛站长需要解决的一个难题之一。对此我们可以看到搜外论坛针对不同的用户进行了栏目的划分,笔者细数了一下大约有31个栏目,不同的栏目访客有着不同的权限,这样就能更加方便的管理访客,提升网站的整体友好体验度。

  第五是很多SEO老鸟都很熟悉的ZAC博客了。ZAC博客的排名十分的稳定,这有赖于ZAC博客每日都会提供相关权威的SEO文章。同时其也用了的自己的品牌知名度。自然而然其可以获得不错的排名。

  从上文对于“SEO”关键词的搜索结果排名分析中我们可以知道在网站的优化推广中访客的精确定位是多么的重要。只要我们精确定位了我们的目标访客,并针对目标访客做优化改进,相信你的站点也能让访客一来再来。本文源自大主宰http://www.dazhuzai.cc/ 的整理编辑,转载请保留出处。

三篇 : 网站精确定位之创造多元化赢利点

  继续前两日的文章,当我们网站精确定位用户和内容以后,凝聚了某一地区和某一类别的用户在我们网站上,我们可以利用其精准性做高价值的收益。这个在上次的文章里已经说了。这次依然还用我前几天新做的河南艺考网(www.artedus.cn)做例子。

  作为一种模式,当凝聚了某一地区的用户以后,比如我网站针对河南,网站的各种内容等等都是围绕河南的考生来做,来网站的访问者自然也大多是河南考生,我们初步可以联系河南境内的各大画室培训机构等投放广告,还可以进一步深度的做互相合作推广,我们帮画室做推广,写画室软文发布在网站收费,画室帮我们提供信息发布在网站,增加其曝光率,增加宣传,我们有了内容也有了Money。

  但是这样收入并不多。我们需要增加新的赢利点,可持续收入的赢利点,举例,艺考网,每年有海量的学生以艺考生的身份去参加高考以图考上大学,但是录取率低,每年仍有半数以上的学生落榜,作为凝聚广大艺考生的网站,我们可以联系广大院校,助其自考,成人高考类招生,对于学生帮其增加一条可获取文凭的路子。行规,一个考生一般都有点钱分。如果网站每日IP 500 的话,每年6月底还是能拉到至少几十名考生有几千块收入的。当然了前提是在本省教育类有良好的人脉关系。有足够的画室培训机构的资源和合作。等等。否则学生家长是否信任,自己能否铺开路子等等都会很困难。如果关系不到位力度不足。赚的钱可能远远不够跑关系用掉的钱。这类网站比如在本地或者某个地区有良好的人脉关系或者强大的资金。否则你刚做出来 有人看到有利润,会马上争相模仿,没人脉关系没钱的话。会马上被竞争吃掉。死翘翘的。

  当然了 这些只是一种模式。可以应用到好多行业站当中,比如分类信息,本地各种各样的行业站。等等都可以用这种模式去增加赢利点。而且收入颇丰。对于普通的网站我们一样可以做用户所需 在所需中创造我们新的盈利点。一样可以增加我们的收入。网站。内容是让用户看的,不是让搜索 让机器看的。真正的所用户所需,用户所想,我们的网站才会更好 收入才会更多。

  列举几个可以做的行业站:园林、绿化,其中猫腻颇多,利润超丰厚。本地的美食介绍、房产介绍(中介) 人才信息、分类信息,等等都是收入颇丰的。而且不想艺考网这类网站需要自己非常了解这个行业,和必须有相当大的人脉关系才可以做。大家慢慢发掘吧,只要有需要,做的人不是太多。我们就可以上。一样可以做。可以赚钱。

上一篇:个性喜帖|青春系列 个性创意喜帖 上一篇:网页保存密码|Win8.1系统网页无法保存用户密码的解决方法
与该文相关的文章

温馨提示:如果您对51阅读吧有任何建议,请通过网站联系邮箱向我们反馈,感谢各位的建议与支持!