截取網頁局部區域css樣式的方法和系統的制作方法

【技術領域】

[0001]本發明涉及計算機網絡技術領域，特別是涉及一種截取網頁局部區域CSS樣式的方法和系統。

【背景技術】

[0002]CSS(Cascading Style Sheets，級聯樣式表)是一種計算機標記語言，其在標準網頁設計中負責網頁內容的表現。相對于傳統HTML(Hyper text Markup Language，超文本標記語言)的表現而言，CSS能夠對網頁中各個顯示對象的位置排版進行像素級的精確控制，支持幾乎所有的字體、字號、樣式，并能夠進行初步交互設計，是目前基于文本展示最優秀的表現設計語言之一。在CSS發揮網頁內容表現作用的過程中，由開發人員開發的CSS文件被存放在后端的網頁服務器;該CSS文件進而在客戶端可以由瀏覽器調用、加載并直接加以執行(無需編譯)，從而將開發人員所需要表現的效果展示在瀏覽器中供用戶瀏覽。

[0003]傳統的做法中，開發人員如果想使用已有網站的某個元素的CSS內容，需要先打開瀏覽器自帶的控制臺，并讓鼠標點擊選中目標元素，然后再控制臺中查看該元素所有CSS的內容，并對內容進行復制，拷貝到自己代碼中。在查看不同元素的CSS時，一般需要重復進行如下操作:

[0004](1)點擊控制面板中的元素選擇按鈕。

[0005](2)將鼠標移至目標元素上。

[0006](3)點擊鼠標左鍵選中目標元素，在控制臺中查看其全部CSS屬性。

[0007]上述操作過程每看一個元素就要點擊一次元素，操作步驟多，操作過程較為繁瑣。

【發明內容】

[0008]基于此，有必要針對現有技術操作步驟多、過程繁瑣的問題，提供一種截取網頁局部區域CSS樣式的方法和系統。

[0009]—種截取網頁局部區域CSS樣式的方法，包括以下步驟:

[0010]在接收到用戶輸入的監測指令時，監測輸入設備在網頁中的指示位置；

[0011]根據所述指示位置從網頁中所有的html元素中確定用戶需要復制的第一目標元素，并獲取所述第一目標元素的引用；

[0012]遍歷網頁中所有的html元素的CSS規則對象，從所述CSS規則對象中查找第一目標元素的引用對應的cssRules對象；

[0013]從所述cssRules對象中獲取第一目標元素的CSS樣式鍵值對；

[0014]在接收到用戶的復制指令時，復制所述CSS樣式鍵值對。

[0015]—種截取網頁局部區域CSS樣式的系統，包括:

[0016]監測裝置，用于在接收到用戶輸入的監測指令時，監測輸入設備在網頁中的指示位置；

[0017]第一獲取裝置，用于根據所述指示位置從網頁中所有的html元素中確定用戶需要復制的第一目標元素，并獲取所述第一目標元素的引用；

[0018]查找裝置，用于遍歷網頁中所有的html元素的CSS規則對象，從所述CSS規則對象中查找第一目標元素的引用對應的cssRules對象；

[0019]第二獲取裝置，用于從所述cssRules對象中獲取第一目標元素的CSS樣式鍵值對；

[0020]復制裝置，用于在接收到用戶的復制指令時，復制所述CSS樣式鍵值對。

[0021]上述截取網頁局部區域CSS樣式的方法和系統，通過監測輸入設備在網頁中的指示位置;根據所述指示位置從網頁中所有的html元素中確定用戶需要復制的第一目標元素，并獲取所述第一目標元素的引用;遍歷網頁中所有的html元素的CSS規則對象，從所述CSS規則對象中查找第一目標元素的引用對應的cssRules對象；從第一目標元素的cssRules對象中獲取第一目標元素的CSS樣式鍵值對，當用戶需要使用現有網頁中某個元素的CSS樣式時，只需輸入監測指令并將輸入設備移動到相應目標元素的坐標范圍內，就可以查看目標元素的CSS樣式值;如果想要拷貝目標元素的CSS樣式，只需輸入復制指令，即可將CSS樣式拷貝到系統粘貼板，減少了截取網頁局部區域CSS樣式時的操作步驟，方便了用戶操作。

【附圖說明】

[0022]圖1為一個實施例的截取網頁局部區域CSS樣式的方法流程圖；

[0023]圖2為一個實施例的截取網頁局部區域CSS樣式的系統結構示意圖。

【具體實施方式】

[0024]下面結合附圖對本發明的技術方案做進一步闡述。

[0025]圖1為一個實施例的截取網頁局部區域CSS樣式的方法流程圖。如圖1所示，本發明的截取網頁局部區域CSS樣式的方法可包括以下步驟:

[0026]S1，在接收到用戶輸入的監測指令時，監測輸入設備在網頁中的指示位置；

[0027]S2，根據所述指示位置從網頁中所有的html元素中確定用戶需要復制的第一目標元素，并獲取所述第一目標元素的引用；

[0028]S3，遍歷網頁中所有的html元素的CSS規則對象，從所述CSS規則對象中查找第一目標元素的引用對應的cssRules對象；

[0029]S4，從所述cssRules對象中獲取第一目標元素的CSS樣式鍵值對；

[0030]S5，在接收到用戶的復制指令時，復制所述CSS樣式鍵值對。

[0031]其中，步驟S3可包括:

[0032]S31，獲取網頁中所有html元素的CSS規則對象；

[0033]S3 2，遍歷所述CSS規則對象的屬性，獲取所述CSS規則對象的每個屬性中的cssRules 對象；

[0034]S33，遍歷所述cssRules對象，并將所述cssRules對象的每個屬性中的selectorText屬性與第一目標元素進行匹配;若匹配成功，則將所述cssRules對象設置為第一目標元素的cssRules對象。

[0035]本發明可安裝在瀏覽器內核的插件中，例如，可安裝在chrome瀏覽器內核的插件中。

[0036]在一個實施例中，所述監測指令可包括按住鍵盤上的特定鍵不放，例如按住ctrl鍵，也可包括按下特定按鍵的組合，例如ctrl+shift+Fl的組合等，還可包括點擊在網頁中設置的特定按鈕。所述輸入設備可包括鼠標、手寫筆等。為方便敘述，下文以所述輸入指令為按住c tr 1鍵，所述輸入設備為鼠標為例。

[0037]當檢測到用戶按下ctrl鍵時，可為當前網頁中所有的html元素注冊一個監測鼠標經過事件的函數d i splayCs s，在用戶放開c tr 1鍵時，所有元素取消對該事件的監測。當鼠標在網頁中的坐標處于網頁中第一 html元素的坐標范圍之內時，可將所述第一 html元素設置為第一目標元素。

[0038]鼠標移動到所述第一目標元素上的時候，之前注冊的displayCss函數開始執行，首先，該函數從傳入該事件的event參數中獲取該目標元素的引用，然后根據該引用獲取該元素在網頁中的坐標值1，7和尺寸(例如:長高》1(11:11，11618111:)。根據坐標值1，7和長高width, height生成一個絕對定位的div元素覆蓋到目標元素的上面，并為所述div元素生成第一標識。所述第一標識可以是顏色標識。例如，可將所述div元素的顏色設置為藍色半透明，用來顯示所述第一目標元素的CSS鍵值對。還可為所述第一目標元素設置第二標識，用來標識所述第一目標元素。所述第二標識也可以是顏色標識，例如，可將所述第一目標元素的邊框設置為紅色。當鼠標從所述第一目標元素移動到第二目標元素上時，可清除所述div元素，并在所述第二目標元素上方重新生成div元素。然后調用getCss函數，并將獲得的目標元素的弓I用傳入所述ge tCs s函數。

[0039]getCss函數通過瀏覽器中的document.styleSheets屬性獲得頁面中所有元素的所有的CSS規則對象，然后遍歷該對象中的所有屬性，獲得每個屬性中的cssRules對象，遍歷該cssRules對象，并將cssRules對象的每個屬性中的selectorText屬性與目標元素做jquery的is運算(target.1s(selectorText))，如果返回true，貝表示當前的cssRules對象就是目標元素的規則，如果返回false，則一直將遍歷走完，直到發現該目標元素的cssRules為止。找到對應的cssRules之后，獲取該cssRules對象中的style屬性的值，該值是一個鍵值對，包含該元素的所有CSS樣式鍵值對，我們對其中的值進行空值過濾以及瀏覽器自帶的CSS屬性的過濾，最終返回該元素的有效CSS樣式鍵值對。將返回的鍵值對序列化成字符串的形式顯示在div元素上面。

[0040]在接收到用戶的復制指令時，可復制所述CSS樣式鍵值對。例如，可在按住ctrl鍵的同時點擊鼠標左鍵，通過第三方ZeroClipboard庫將getCss函數獲得的鍵值對復制到系統的粘貼板。

總結

以上是生活随笔為你收集整理的html局部可复制,截取网页局部区域css样式的方法和系统的制作方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。