截取網(wǎng)頁局部區(qū)域css樣式的方法和系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)領(lǐng)域，特別是涉及一種截取網(wǎng)頁局部區(qū)域CSS樣式的方法和系統(tǒng)。
【背景技術(shù)】
[0002]CSS(Cascading Style Sheets，級聯(lián)樣式表)是一種計(jì)算機(jī)標(biāo)記語言，其在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)中負(fù)責(zé)網(wǎng)頁內(nèi)容的表現(xiàn)。相對于傳統(tǒng)HTML(Hyper text Markup Language，超文本標(biāo)記語言)的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中各個顯示對象的位置排版進(jìn)行像素級的精確控制，支持幾乎所有的字體、字號、樣式，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言之一。在CSS發(fā)揮網(wǎng)頁內(nèi)容表現(xiàn)作用的過程中，由開發(fā)人員開發(fā)的CSS文件被存放在后端的網(wǎng)頁服務(wù)器;該CSS文件進(jìn)而在客戶端可以由瀏覽器調(diào)用、加載并直接加以執(zhí)行(無需編譯)，從而將開發(fā)人員所需要表現(xiàn)的效果展示在瀏覽器中供用戶瀏覽。
[0003]傳統(tǒng)的做法中，開發(fā)人員如果想使用已有網(wǎng)站的某個元素的CSS內(nèi)容，需要先打開瀏覽器自帶的控制臺，并讓鼠標(biāo)點(diǎn)擊選中目標(biāo)元素，然后再控制臺中查看該元素所有CSS的內(nèi)容，并對內(nèi)容進(jìn)行復(fù)制，拷貝到自己代碼中。在查看不同元素的CSS時，一般需要重復(fù)進(jìn)行如下操作:
[0004](1)點(diǎn)擊控制面板中的元素選擇按鈕。
[0005](2)將鼠標(biāo)移至目標(biāo)元素上。
[0006](3)點(diǎn)擊鼠標(biāo)左鍵選中目標(biāo)元素，在控制臺中查看其全部CSS屬性。
[0007]上述操作過程每看一個元素就要點(diǎn)擊一次元素，操作步驟多，操作過程較為繁瑣。

【發(fā)明內(nèi)容】

[0008]基于此，有必要針對現(xiàn)有技術(shù)操作步驟多、過程繁瑣的問題，提供一種截取網(wǎng)頁局部區(qū)域CSS樣式的方法和系統(tǒng)。
[0009]—種截取網(wǎng)頁局部區(qū)域CSS樣式的方法，包括以下步驟:
[0010]在接收到用戶輸入的監(jiān)測指令時，監(jiān)測輸入設(shè)備在網(wǎng)頁中的指示位置；
[0011]根據(jù)所述指示位置從網(wǎng)頁中所有的html元素中確定用戶需要復(fù)制的第一目標(biāo)元素，并獲取所述第一目標(biāo)元素的引用；
[0012]遍歷網(wǎng)頁中所有的html元素的CSS規(guī)則對象，從所述CSS規(guī)則對象中查找第一目標(biāo)元素的引用對應(yīng)的cssRules對象；
[0013]從所述cssRules對象中獲取第一目標(biāo)元素的CSS樣式鍵值對；
[0014]在接收到用戶的復(fù)制指令時，復(fù)制所述CSS樣式鍵值對。
[0015]—種截取網(wǎng)頁局部區(qū)域CSS樣式的系統(tǒng)，包括:
[0016]監(jiān)測裝置，用于在接收到用戶輸入的監(jiān)測指令時，監(jiān)測輸入設(shè)備在網(wǎng)頁中的指示位置；
[0017]第一獲取裝置，用于根據(jù)所述指示位置從網(wǎng)頁中所有的html元素中確定用戶需要復(fù)制的第一目標(biāo)元素，并獲取所述第一目標(biāo)元素的引用；
[0018]查找裝置，用于遍歷網(wǎng)頁中所有的html元素的CSS規(guī)則對象，從所述CSS規(guī)則對象中查找第一目標(biāo)元素的引用對應(yīng)的cssRules對象；
[0019]第二獲取裝置，用于從所述cssRules對象中獲取第一目標(biāo)元素的CSS樣式鍵值對；
[0020]復(fù)制裝置，用于在接收到用戶的復(fù)制指令時，復(fù)制所述CSS樣式鍵值對。
[0021]上述截取網(wǎng)頁局部區(qū)域CSS樣式的方法和系統(tǒng)，通過監(jiān)測輸入設(shè)備在網(wǎng)頁中的指示位置;根據(jù)所述指示位置從網(wǎng)頁中所有的html元素中確定用戶需要復(fù)制的第一目標(biāo)元素，并獲取所述第一目標(biāo)元素的引用;遍歷網(wǎng)頁中所有的html元素的CSS規(guī)則對象，從所述CSS規(guī)則對象中查找第一目標(biāo)元素的引用對應(yīng)的cssRules對象；從第一目標(biāo)元素的cssRules對象中獲取第一目標(biāo)元素的CSS樣式鍵值對，當(dāng)用戶需要使用現(xiàn)有網(wǎng)頁中某個元素的CSS樣式時，只需輸入監(jiān)測指令并將輸入設(shè)備移動到相應(yīng)目標(biāo)元素的坐標(biāo)范圍內(nèi)，就可以查看目標(biāo)元素的CSS樣式值;如果想要拷貝目標(biāo)元素的CSS樣式，只需輸入復(fù)制指令，即可將CSS樣式拷貝到系統(tǒng)粘貼板，減少了截取網(wǎng)頁局部區(qū)域CSS樣式時的操作步驟，方便了用戶操作。
【附圖說明】
[0022]圖1為一個實(shí)施例的截取網(wǎng)頁局部區(qū)域CSS樣式的方法流程圖；
[0023]圖2為一個實(shí)施例的截取網(wǎng)頁局部區(qū)域CSS樣式的系統(tǒng)結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0024]下面結(jié)合附圖對本發(fā)明的技術(shù)方案做進(jìn)一步闡述。
[0025]圖1為一個實(shí)施例的截取網(wǎng)頁局部區(qū)域CSS樣式的方法流程圖。如圖1所示，本發(fā)明的截取網(wǎng)頁局部區(qū)域CSS樣式的方法可包括以下步驟:
[0026]S1，在接收到用戶輸入的監(jiān)測指令時，監(jiān)測輸入設(shè)備在網(wǎng)頁中的指示位置；
[0027]S2，根據(jù)所述指示位置從網(wǎng)頁中所有的html元素中確定用戶需要復(fù)制的第一目標(biāo)元素，并獲取所述第一目標(biāo)元素的引用；
[0028]S3，遍歷網(wǎng)頁中所有的html元素的CSS規(guī)則對象，從所述CSS規(guī)則對象中查找第一目標(biāo)元素的引用對應(yīng)的cssRules對象；
[0029]S4，從所述cssRules對象中獲取第一目標(biāo)元素的CSS樣式鍵值對；
[0030]S5，在接收到用戶的復(fù)制指令時，復(fù)制所述CSS樣式鍵值對。
[0031]其中，步驟S3可包括:
[0032]S31，獲取網(wǎng)頁中所有html元素的CSS規(guī)則對象；
[0033]S3 2，遍歷所述CSS規(guī)則對象的屬性，獲取所述CSS規(guī)則對象的每個屬性中的cssRules 對象；
[0034]S33，遍歷所述cssRules對象，并將所述cssRules對象的每個屬性中的selectorText屬性與第一目標(biāo)元素進(jìn)行匹配;若匹配成功，則將所述cssRules對象設(shè)置為第一目標(biāo)元素的cssRules對象。
[0035]本發(fā)明可安裝在瀏覽器內(nèi)核的插件中，例如，可安裝在chrome瀏覽器內(nèi)核的插件中。
[0036]在一個實(shí)施例中，所述監(jiān)測指令可包括按住鍵盤上的特定鍵不放，例如按住ctrl鍵，也可包括按下特定按鍵的組合，例如ctrl+shift+Fl的組合等，還可包括點(diǎn)擊在網(wǎng)頁中設(shè)置的特定按鈕。所述輸入設(shè)備可包括鼠標(biāo)、手寫筆等。為方便敘述，下文以所述輸入指令為按住c tr 1鍵，所述輸入設(shè)備為鼠標(biāo)為例。
[0037]當(dāng)檢測到用戶按下ctrl鍵時，可為當(dāng)前網(wǎng)頁中所有的html元素注冊一個監(jiān)測鼠標(biāo)經(jīng)過事件的函數(shù)d i splayCs s，在用戶放開c tr 1鍵時，所有元素取消對該事件的監(jiān)測。當(dāng)鼠標(biāo)在網(wǎng)頁中的坐標(biāo)處于網(wǎng)頁中第一 html元素的坐標(biāo)范圍之內(nèi)時，可將所述第一 html元素設(shè)置為第一目標(biāo)元素。
[0038]鼠標(biāo)移動到所述第一目標(biāo)元素上的時候，之前注冊的displayCss函數(shù)開始執(zhí)行，首先，該函數(shù)從傳入該事件的event參數(shù)中獲取該目標(biāo)元素的引用，然后根據(jù)該引用獲取該元素在網(wǎng)頁中的坐標(biāo)值1，7和尺寸(例如:長高》1(11:11，11618111:)。根據(jù)坐標(biāo)值1，7和長高width, height生成一個絕對定位的div元素覆蓋到目標(biāo)元素的上面，并為所述div元素生成第一標(biāo)識。所述第一標(biāo)識可以是顏色標(biāo)識。例如，可將所述div元素的顏色設(shè)置為藍(lán)色半透明，用來顯示所述第一目標(biāo)元素的CSS鍵值對。還可為所述第一目標(biāo)元素設(shè)置第二標(biāo)識，用來標(biāo)識所述第一目標(biāo)元素。所述第二標(biāo)識也可以是顏色標(biāo)識，例如，可將所述第一目標(biāo)元素的邊框設(shè)置為紅色。當(dāng)鼠標(biāo)從所述第一目標(biāo)元素移動到第二目標(biāo)元素上時，可清除所述div元素，并在所述第二目標(biāo)元素上方重新生成div元素。然后調(diào)用getCss函數(shù)，并將獲得的目標(biāo)元素的弓I用傳入所述ge tCs s函數(shù)。
[0039]getCss函數(shù)通過瀏覽器中的document.styleSheets屬性獲得頁面中所有元素的所有的CSS規(guī)則對象，然后遍歷該對象中的所有屬性，獲得每個屬性中的cssRules對象，遍歷該cssRules對象，并將cssRules對象的每個屬性中的selectorText屬性與目標(biāo)元素做jquery的is運(yùn)算(target.1s(selectorText))，如果返回true，貝表示當(dāng)前的cssRules對象就是目標(biāo)元素的規(guī)則，如果返回false，則一直將遍歷走完，直到發(fā)現(xiàn)該目標(biāo)元素的cssRules為止。找到對應(yīng)的cssRules之后，獲取該cssRules對象中的style屬性的值，該值是一個鍵值對，包含該元素的所有CSS樣式鍵值對，我們對其中的值進(jìn)行空值過濾以及瀏覽器自帶的CSS屬性的過濾，最終返回該元素的有效CSS樣式鍵值對。將返回的鍵值對序列化成字符串的形式顯示在div元素上面。
[0040]在接收到用戶的復(fù)制指令時，可復(fù)制所述CSS樣式鍵值對。例如，可在按住ctrl鍵的同時點(diǎn)擊鼠標(biāo)左鍵，通過第三方ZeroClipboard庫將getCss函數(shù)獲得的鍵值對復(fù)制到系統(tǒng)的粘貼板。