知道html元素，如何定位js代码

JavaScript023

知道html元素，如何定位js代码,第1张

首先对于一些简单的html页面，里面的js文件加载的也少的情况下，我们可以可以使用火狐的firebug或者google的控制台都可以轻松的查看.

火狐浏览器的查看方法安装Firebug然后按F12选中你要看的dom元素在右侧的事件中可以详细的看到绑定了那些事件.

Google浏览器也可以用同样的方法查看对应dom元素绑定的事件.

F12-->Elements-->Event Listenners

但是对于一些复杂的Html页面,相当于加载的js文件和相应的插件也比较多,这个时候用浏览器自带的事件查看器就显得力不从心了!

所以遇到上面这种情况,我们想快速定位一个元素绑定那些事件的时候,就得借助google的Visual Event插件帮助我们快速定位了,所以我们首先我们的去google 扩展库去下载对应的插件并安装.

安装成功后浏览器的右上角会出现一个小眼睛.

接着说说一下如何使用Visual Event插件的小眼睛，等页面加载完之后，点击小眼睛然后大概过不了5秒钟，就可以看到页面上元素绑定事件了.

最后移动鼠标到你想查看的元素上面就可以看到对于的js文件已经和对应的事件名真的很方便使用.

【来源网络】

Div绝对定位js代码

function showDiv(name)

{

var cf=document.getElementById("DivID")

var oImg=document.getElementById(name)

var eT=0,eL=0,p=oImg

var sT=document.body.scrollTop,sL=document.body.scrollLeft

var eH=oImg.height+25,eW=oImg.width

while(p&&p.tagName!="BODY"){eT+=p.offsetTopeL+=p.offsetLeftp=p.offsetParent}

cf.style.top=((document.body.clientHeight-(eT-sT)-eH>=cf.style.posHeight)?eT+eH:eT-cf.style.posHeight)-4

cf.style.left=((document.body.clientWidth-(eL-sL)>=cf.style.posWidth)?eL:eL+eW-cf.style.posWidth)

}

1、在浏览器中打开要调试的网页，然后点击”F12 Developer Tools“，也可以使用快捷键F12。

2、弹出的工具窗口中，默认选择是Dom Explorer功能，它会列出网页的源代码和CSS样式列表。

3、使用元素定位功能选择页面中的一个元素，也会定位到源代码中位置。

4、对定位到的文字修改CSS样式，添加inline style，比如把字体变为红色。

5、查看元素已经应用的CSS样式，点击"computed"菜单。

6、然后查看元素的布局信息，点击"Layout"菜单。