请注意,本文编写于 2210 天前,最后修改于 1551 天前,其中某些信息可能已经过时。 简单的说一下PC下使用chrome浏览器抓取页面元素的方法。 **`多图预警` `皮皮虾预警`** 本文主要介绍Chrome浏览器方面的操作。其他浏览器(如火狐)也可以起到相同效果,操作细节略有不同,建议百度。另外本篇文章**不讲解过多的js,有需要请看另一篇文章(常用JS)。本文对于没有HTML基础或者代码恐惧症以及密集恐惧症患者可能会有不适,且本人文笔并不好,所以各位多包涵着。** ## 磨刀不误砍柴工 chrome浏览器或者chrome浏览器相同内核的一些国产浏览器都有一个功能,这个功能在右键菜单中叫做“检查”。为了调用这个功能,我们需要先有一个支持此功能的浏览器。 **在继续看如何下载浏览器之前,请尝试按下`F12`或者`Ctrl`+`Shift`+`i`按键查看是否有个如下图的窗口蹦出来了,有的话请跳过此章节。** ![窗口](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/0%20-%20DevWindow.png#vwid=1396&vhei=564#vwid=1396&vhei=564) 看到这里的时候你肯定是没成功。不用着急,问题不大。你可以直接去百度里搜索"chrome",然后点击**普通下载**。没有看到普通下载按钮的朋友,可以直接去[Chrome 官网](https://www.google.cn/chrome/)下载。下载后双击打开一个exe文件,然后稍等片刻,浏览器便会自动打开全程十分干净无捆绑,教程结束。 开玩笑,工具刚刚装好。 ## 开始了解强大的Chrome开发人员窗口 我没有仔细了解过那个窗口到底官方怎么叫,姑且就叫它开发人员窗口。这个窗口具备很多的功能,而对于本文来讲,我们只介绍其中的几个功能(其他的功能如果你用得上,那自然会知道对吧~)。 #### 打开窗口 打开方法很简单,如果你在之前下载那一节按照我说的做了,那么你现在屏幕上这个窗口应该还在(没在就再点一次)。或者,右键点检查: ![右键菜单](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/1%20-%20contentMenu.png#vwid=350&vhei=348) 现在,如最上面那幅图一样的窗口应该出来了吧?我再放一次图(我真的没在水字数): ![窗口](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/0%20-%20DevWindow.png#vwid=1396&vhei=564#vwid=1396&vhei=564) 首先顶上那一行("Elements/Console/Sources...")是一些功能,暂时用得上前两个。第二个是js命令窗口。那第一个是什么?往下看~ #### "你是谁?" "我是Elements" - Elements面板 第一个ELements是展示页面元素的,也是咱们的主战场。随便打开个网页再打开这个窗口,鼠标划过这些代码,你的网页上会自动用方块显示出对应的元素: ![显示元素](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/2.png#vwid=1919&vhei=946#vwid=1919&vhei=946) 很神奇,对吧? 还有更神奇的。注意开发窗格左上角。 ![滴!神奇海螺](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/3.png#vwid=113&vhei=63#vwid=113&vhei=63) 这是两个按钮。左侧第一个按钮,戳一下可以问神奇海螺很多事情。 开玩笑。那个按钮按一下会变成蓝色。而且这个时候鼠标划过页面,自动高亮了鼠标指向的整个元素。是不是很棒? ![鼠标划过](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/4.png#vwid=1920&vhei=948) 好了,现在你可以按下鼠标左键了。这样你选择的元素就会在右侧高亮并且关闭这个鼠标选择模式。 视线回到左侧。每当悬停选择一个元素的时候,除了为元素上色,上面其实还有一个浮动窗口: ![就是这货](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/5.png#vwid=215&vhei=52#vwid=215&vhei=52) 上面有**丰富多彩**的英文字对吧?好了,现在简单介绍一下这几个英文字。 #### "你到底是谁?" "我真的是元素啊!" - 如何看元素 还是这张图。 ![还是这货](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/5.png#vwid=215&vhei=52#vwid=215&vhei=52) 首先看图上有的。 紫色的是TagName,标签名。标签是什么?比如你看本文,`这句话`中的``就是标签,`p`就是标签名。标签一般都成对出现,常见标签有:div p h1 h2 h3 b header nav等等。(具体是做什么用的?这个不属于本文涉猎范围内,因为如果不会代码,这东西解释起来怕是要头疼的。)。上图tagname就是h2。 接下来就是蓝色的class。一个元素可能有多个class也有可能没有,每个class在显示的时候都会在前面加**"`.`"**点号来表示。class用人话来说就是设置一个规则,大家都来遵守。在一个css样式表里设定了之后,指定调用这个class的元素都会遵从那一套规则 `这句话`中的`papapa`就是class,显示出来就是`.papapa`。上图class是`post-title`。 最后一项一般咱们用不到,前端的朋友会用得到,告诉你元素多大。 Emmmm好像少了什么... (Pia的一拍脑袋)对了!...没有说ID对吧? (揉揉脑袋)刚刚那个元素没有ID,看我给它加一个ID: ![魔法!](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/6.png#vwid=255&vhei=44) 这次多了一个黄色的字,`#hello`,这就是元素ID。元素只能有一个ID,而且在整个网页里面唯一,一般会在前面加上**"`#`"**来显示。`这句话`中的`rua`就是这个元素的ID。id就像是你的身份证号,因为是唯一的,所以通过身份证号可以找到你这个人。上图里的ID就是`hello`。 一个元素是可以同时存在ID和CLASS的。如:`这句话`,两个属性没有先后之分。但是如果你有单独设置样式,那就是后来者居上,覆盖前者的样式了。 #### 俺老孙会七十二变 - 用电脑看手机页面 很多网站的电脑视图和手机视图是不一样的,应用的规则也不太一样。为了能让我们在Chrome电脑版调试手机页面,我们还需要一点准备。 还记得那两个按钮吗? ![我神奇海螺又来了](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/3.png#vwid=113&vhei=63#vwid=113&vhei=63) 刚刚说了第一个按钮,现在用的是第二个按钮。点一下,视图会变成这样: ![duang~](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/8.png#vwid=1920&vhei=948) 这显然不是手机页面。不过看到页面顶上的Responsive了嘛?戳一下: ![戳](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/9.png#vwid=273&vhei=490) 这次就有手机了。我一般习惯用Galaxy S5来调试。点一下就好了: ![S5](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/10.png#vwid=566&vhei=902) 这个设置点一次就可以了,以后只要打开开发窗口就会自动变成这样。当然关掉的话再点一下刚刚两个按钮的第二个就好了。 #### 我的门前三包 - 边距 在酷安帮别人鼓捣FA的网页的时候最常遇到的就是去除留白和去掉元素。去除留白其实是相对简单的,毕竟去除元素多一半删广告,某毒的广告,弄过的都懂,还有一些页面用js动态加固广告。 ##### 边距在哪里呀 边距在哪里~ 还是这张图 ![显示元素](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/2.png#vwid=1919&vhei=946#vwid=1919&vhei=946) 你看,“常用JS”上下各有一行黄色,那个就是边距中的外边距。你选中一个元素,并且在元素右侧或者下侧的样式设定中,滚动到最下面,就能看到有关边距的设定图: ![犹如皇城一般](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/7.png#vwid=403&vhei=527) 将颜色和这个进行比对,外边距就很容易知道是`margin`而且数值是20(px)。 ##### 边距种类千千万,看你想要哪一种 上图有几种边距,最外侧position是位置,代表与网页的绝对位置,一般是浮动元素用的。继续是margin,外边距,一般是元素外侧的空白,大部分的去除留白请求也是这个。再往里是border,这个算是边框。再往里是padding,内边距,一般是设置子元素距离元素边的距离。中心是元素大小。这些东西简单点理解,就是:margin是你外面衣服多厚,padding就是你有多少肉,border的话就是你的皮...皮皮虾! ##### 拿起手术刀 - 开始调整 > 以下网页来自酷狗。m.kugou.com,本文仅仅拿来做演示,侵删。 现在是正题了。切换到手机视图。打开酷狗。 ![kugou](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/kg1.png#vwid=1920&vhei=948) 然后现在已经去掉去掉了顶栏(去除方法参见隔壁文章"常用JS",顶栏id#topFixed),可是我们看到上面有一大片空白。这肯定不是我们想要的。现在根据上文说的,首先用鼠标悬停在空白上,看看到底谁的额头这么大: ![哇!光头!](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/Xshot-0094.png#vwid=1920&vhei=947) 可以看到对应元素是`...`,点击左键确定元素,然后查看右侧样式: ![警察叔叔,就是他!](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/Xshot-0095.png#vwid=404&vhei=532) 看到了嘛?特别明显,在bd类下有个padding-top。刚刚说过,padding是内边距,而padding-top的意思是顶部边距。我们把鼠标悬停在这一项上,会在前面出现复选框。反选padding-top一项的复选框,相当于取消这一样式,现在查看效果: ![Perfact](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/Xshot-0096.png#vwid=1920&vhei=940) 可以看到,这次效果就对了。也就是说,我们只需要去除这个padding-top即可。将复选框勾选回来。 我们接下来使用JS来针对性的去除padding-top效果。这里只简单讲下,具体的用法看隔壁常用JS文章。 我们首先看到这个元素拥有一个ID叫做bd,那么选取元素就很简单。 ```js document.getElementById("bd") ``` 这半句js便可以选取这个元素。这个元素下有一个专门放各种样式的object,就是style。在style下,所有的css样式使用驼峰命名法在这里列出。根据驼峰命名法,padding-top就是paddingTop。于是,我们可以直接给这个样式赋值。直接给0是清除最简单的方法。 ```js document.getElementById("bd").style.paddingTop=0; ``` 这句js构造好了,切换到Console标签,输入,回车。可以看到效果已经完美了。这句js就可以放进FusionApp里了。 ![Finished](https://bucket1-1251630806.cos.ap-beijing-1.myqcloud.com/blog/Xshot-0097.png#vwid=1920&vhei=948) ***** 这篇简单教学就到这里了。文笔不好多多包涵,而且之前也很少写教程相关的东西,如果有哪里不清楚,欢迎在酷安找我@Cansll蚕食。 javascript 赏杯咖啡 ENJOY 0