前端元素查找

1 说明

    实际定制开发过程中，经常需要对页面上的元素进行定位查找，比如对页面元素的样式、图片、DOM元素、甚至代码逻辑等进行查找。本文介绍了前端元素查找的几种常用方式。

2 样式的定位

    以修改即席查询报表工具栏中的刷新图标为例子，步骤如下：

    1）使用浏览器开发者工具的审查元素，找到刷新按钮使用的样式为：queryview-toolbar-refresh 

    2）有时候一个样式控制，譬如颜色，也许是其父元素的样式继承下来的，您需要确定是哪个样式起作用，这时可以在开发者工具右侧styles视图启用、删除或增加样式确认的，确认好了以后再在样式文件中修改。

2 图片的定位

    图片查找方法和样式查找方法类似，主要确认使用的是哪个图片，有以下两个场景。

2.1 图片转为base64返回

    类似上面图片因为比较小，会被转成base64返回。

    1）这时候，您可以点击上图中样式旁边的  bof_merge.css.jsp:21762（点开后效果见下图），这个意思是.ds-item__image.ORACLE, .ds-item__image.ORACLE_OCI样式在bof_merge.css.jsp中的21762行，上个文档说过系统中的css都是通过这个jsp合并一起返回的

    2）但是他会在合并文件前都会注明这段css存于哪个文件（譬如：/** /vision/css/module.css */），向前搜索.css，只要找到21762行之前的css文件标记，就知道存在于哪个css文件

    3）然后取到war包中找到对应css文件，搜索.ds-item__image.ORACLE, .ds-item__image.ORACLE_OCI样式就知道图片存于哪个目录然后替换。

    4）当然还有更简单粗暴的方法，直接在war包中全文搜索对应的样式（仅搜索*.css文件即可）。

2.2 图片根据ID返回

    有些图片是需要根据前端传给后台的ID返回对应的图片，这种方式无法在css样式中找到图片路径，可以以下方法找到

    1）若图片样式如下时，找到图片对应的theType属性

    2）参考以下表格找到对应的目录