1. 概述
Finereport 中控件的「事件」功能非常強大，用戶可通過自定義 JS 做出想要的效果。但是 JS 對於大多數非專業報表開發者較爲陌生，需要額外的學習成本，尤其是 jQuery 選擇器。而報表設計中，自定義 JS 事件又非常需要獲取指定的 DOM 修改屬性，本文将幫助你快速選擇指定 DOM，完整自定義 JS 的設計。
請選擇 Chrome 浏覽器使用，最好是最新版本或者符合當前報表系統浏覽需求的版本。
2. 示例
2.1 準備示例模板
準備一個内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStarted
打開模板，預覽模板。如下圖所示：
2.2 進入開發者工具窗口
Chrome 浏覽器預覽模板，在 Chrome 浏覽器中通過 F12 鍵或者 Ctrl+Shift+I 快捷鍵或「設置>更多工具>開發者工具」中打開 「開發者工具」窗口，如下圖所示：
2.3 進入 DOM 選定狀态
在「開發者工具」窗口，點擊 ELements，切換至 Elements 界面，然後點擊「選擇元素」 圖标，進入 DOM 選擇狀态。
在此狀态下，鼠标懸浮在頁面中的元素上時，會在鼠标所在位置上方顯示改元素的一些信息，比如上圖中，鼠标懸浮在「 查詢按鈕」上，顯示了這個元素的類屬性和大小。
如下圖所示：
2.4 獲取 DOM 所對應的選擇器
1）在需要獲取的 DOM上單擊之後，Elements 中自動選中了該 DOM 。如下圖所示：
2）鼠标移至 Elements 中被選中的 DOM。在其上面右鍵，選擇「Copy > Copy selector」，點擊 Copy selector時，該 DOM 的選擇器已經複制到剪貼板中，在設計器 JavaScript 腳本編輯器中進行粘貼 就可以使用了。如下圖所示：
我選中的 「按鈕控件」DOM 選擇器是 #fr-btn-WIDGET3 > div
3. 注意事項
1）獲取到的一些選擇器很長，但是是非常準确的，對於無太多 JavaScript 知識的模板制作者來說，這個是很合适的。
2）由於是通過 Chrome 幫助獲取的。因此在主流的浏覽器上預覽是沒有問題的，但是在 一些低版本 IE 上面可能會出現問題，請謹慎使用該方法。
