截取網(wǎng)頁(yè)局部區(qū)域css樣式的方法和系統(tǒng)的制作方法

【技術(shù)領(lǐng)域】

[0001]本發(fā)明涉及計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)領(lǐng)域，特別是涉及一種截取網(wǎng)頁(yè)局部區(qū)域CSS樣式的方法和系統(tǒng)。

【背景技術(shù)】

[0002]CSS(Cascading Style Sheets，級(jí)聯(lián)樣式表)是一種計(jì)算機(jī)標(biāo)記語(yǔ)言，其在標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)中負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容的表現(xiàn)。相對(duì)于傳統(tǒng)HTML(Hyper text Markup Language，超文本標(biāo)記語(yǔ)言)的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁(yè)中各個(gè)顯示對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體、字號(hào)、樣式，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言之一。在CSS發(fā)揮網(wǎng)頁(yè)內(nèi)容表現(xiàn)作用的過(guò)程中，由開(kāi)發(fā)人員開(kāi)發(fā)的CSS文件被存放在后端的網(wǎng)頁(yè)服務(wù)器;該CSS文件進(jìn)而在客戶端可以由瀏覽器調(diào)用、加載并直接加以執(zhí)行(無(wú)需編譯)，從而將開(kāi)發(fā)人員所需要表現(xiàn)的效果展示在瀏覽器中供用戶瀏覽。

[0003]傳統(tǒng)的做法中，開(kāi)發(fā)人員如果想使用已有網(wǎng)站的某個(gè)元素的CSS內(nèi)容，需要先打開(kāi)瀏覽器自帶的控制臺(tái)，并讓鼠標(biāo)點(diǎn)擊選中目標(biāo)元素，然后再控制臺(tái)中查看該元素所有CSS的內(nèi)容，并對(duì)內(nèi)容進(jìn)行復(fù)制，拷貝到自己代碼中。在查看不同元素的CSS時(shí)，一般需要重復(fù)進(jìn)行如下操作:

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

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

[0006](3)點(diǎn)擊鼠標(biāo)左鍵選中目標(biāo)元素，在控制臺(tái)中查看其全部CSS屬性。

[0007]上述操作過(guò)程每看一個(gè)元素就要點(diǎn)擊一次元素，操作步驟多，操作過(guò)程較為繁瑣。

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

[0008]基于此，有必要針對(duì)現(xiàn)有技術(shù)操作步驟多、過(guò)程繁瑣的問(wèn)題，提供一種截取網(wǎng)頁(yè)局部區(qū)域CSS樣式的方法和系統(tǒng)。

[0009]—種截取網(wǎng)頁(yè)局部區(qū)域CSS樣式的方法，包括以下步驟:

[0010]在接收到用戶輸入的監(jiān)測(cè)指令時(shí)，監(jiān)測(cè)輸入設(shè)備在網(wǎng)頁(yè)中的指示位置；

[0011]根據(jù)所述指示位置從網(wǎng)頁(yè)中所有的html元素中確定用戶需要復(fù)制的第一目標(biāo)元素，并獲取所述第一目標(biāo)元素的引用；

[0012]遍歷網(wǎng)頁(yè)中所有的html元素的CSS規(guī)則對(duì)象，從所述CSS規(guī)則對(duì)象中查找第一目標(biāo)元素的引用對(duì)應(yīng)的cssRules對(duì)象；

[0013]從所述cssRules對(duì)象中獲取第一目標(biāo)元素的CSS樣式鍵值對(duì)；

[0014]在接收到用戶的復(fù)制指令時(shí)，復(fù)制所述CSS樣式鍵值對(duì)。

[0015]—種截取網(wǎng)頁(yè)局部區(qū)域CSS樣式的系統(tǒng)，包括:

[0016]監(jiān)測(cè)裝置，用于在接收到用戶輸入的監(jiān)測(cè)指令時(shí)，監(jiān)測(cè)輸入設(shè)備在網(wǎng)頁(yè)中的指示位置；

[0017]第一獲取裝置，用于根據(jù)所述指示位置從網(wǎng)頁(yè)中所有的html元素中確定用戶需要復(fù)制的第一目標(biāo)元素，并獲取所述第一目標(biāo)元素的引用；

[0018]查找裝置，用于遍歷網(wǎng)頁(yè)中所有的html元素的CSS規(guī)則對(duì)象，從所述CSS規(guī)則對(duì)象中查找第一目標(biāo)元素的引用對(duì)應(yīng)的cssRules對(duì)象；

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

[0020]復(fù)制裝置，用于在接收到用戶的復(fù)制指令時(shí)，復(fù)制所述CSS樣式鍵值對(duì)。

[0021]上述截取網(wǎng)頁(yè)局部區(qū)域CSS樣式的方法和系統(tǒng)，通過(guò)監(jiān)測(cè)輸入設(shè)備在網(wǎng)頁(yè)中的指示位置;根據(jù)所述指示位置從網(wǎng)頁(yè)中所有的html元素中確定用戶需要復(fù)制的第一目標(biāo)元素，并獲取所述第一目標(biāo)元素的引用;遍歷網(wǎng)頁(yè)中所有的html元素的CSS規(guī)則對(duì)象，從所述CSS規(guī)則對(duì)象中查找第一目標(biāo)元素的引用對(duì)應(yīng)的cssRules對(duì)象；從第一目標(biāo)元素的cssRules對(duì)象中獲取第一目標(biāo)元素的CSS樣式鍵值對(duì)，當(dāng)用戶需要使用現(xiàn)有網(wǎng)頁(yè)中某個(gè)元素的CSS樣式時(shí)，只需輸入監(jiān)測(cè)指令并將輸入設(shè)備移動(dòng)到相應(yīng)目標(biāo)元素的坐標(biāo)范圍內(nèi)，就可以查看目標(biāo)元素的CSS樣式值;如果想要拷貝目標(biāo)元素的CSS樣式，只需輸入復(fù)制指令，即可將CSS樣式拷貝到系統(tǒng)粘貼板，減少了截取網(wǎng)頁(yè)局部區(qū)域CSS樣式時(shí)的操作步驟，方便了用戶操作。

【附圖說(shuō)明】

[0022]圖1為一個(gè)實(shí)施例的截取網(wǎng)頁(yè)局部區(qū)域CSS樣式的方法流程圖；

[0023]圖2為一個(gè)實(shí)施例的截取網(wǎng)頁(yè)局部區(qū)域CSS樣式的系統(tǒng)結(jié)構(gòu)示意圖。

【具體實(shí)施方式】

[0024]下面結(jié)合附圖對(duì)本發(fā)明的技術(shù)方案做進(jìn)一步闡述。

[0025]圖1為一個(gè)實(shí)施例的截取網(wǎng)頁(yè)局部區(qū)域CSS樣式的方法流程圖。如圖1所示，本發(fā)明的截取網(wǎng)頁(yè)局部區(qū)域CSS樣式的方法可包括以下步驟:

[0026]S1，在接收到用戶輸入的監(jiān)測(cè)指令時(shí)，監(jiān)測(cè)輸入設(shè)備在網(wǎng)頁(yè)中的指示位置；

[0027]S2，根據(jù)所述指示位置從網(wǎng)頁(yè)中所有的html元素中確定用戶需要復(fù)制的第一目標(biāo)元素，并獲取所述第一目標(biāo)元素的引用；

[0028]S3，遍歷網(wǎng)頁(yè)中所有的html元素的CSS規(guī)則對(duì)象，從所述CSS規(guī)則對(duì)象中查找第一目標(biāo)元素的引用對(duì)應(yīng)的cssRules對(duì)象；

[0029]S4，從所述cssRules對(duì)象中獲取第一目標(biāo)元素的CSS樣式鍵值對(duì)；

[0030]S5，在接收到用戶的復(fù)制指令時(shí)，復(fù)制所述CSS樣式鍵值對(duì)。

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

[0032]S31，獲取網(wǎng)頁(yè)中所有html元素的CSS規(guī)則對(duì)象；

[0033]S3 2，遍歷所述CSS規(guī)則對(duì)象的屬性，獲取所述CSS規(guī)則對(duì)象的每個(gè)屬性中的cssRules 對(duì)象；

[0034]S33，遍歷所述cssRules對(duì)象，并將所述cssRules對(duì)象的每個(gè)屬性中的selectorText屬性與第一目標(biāo)元素進(jìn)行匹配;若匹配成功，則將所述cssRules對(duì)象設(shè)置為第一目標(biāo)元素的cssRules對(duì)象。

[0035]本發(fā)明可安裝在瀏覽器內(nèi)核的插件中，例如，可安裝在chrome瀏覽器內(nèi)核的插件中。

[0036]在一個(gè)實(shí)施例中，所述監(jiān)測(cè)指令可包括按住鍵盤(pán)上的特定鍵不放，例如按住ctrl鍵，也可包括按下特定按鍵的組合，例如ctrl+shift+Fl的組合等，還可包括點(diǎn)擊在網(wǎng)頁(yè)中設(shè)置的特定按鈕。所述輸入設(shè)備可包括鼠標(biāo)、手寫(xiě)筆等。為方便敘述，下文以所述輸入指令為按住c tr 1鍵，所述輸入設(shè)備為鼠標(biāo)為例。

[0037]當(dāng)檢測(cè)到用戶按下ctrl鍵時(shí)，可為當(dāng)前網(wǎng)頁(yè)中所有的html元素注冊(cè)一個(gè)監(jiān)測(cè)鼠標(biāo)經(jīng)過(guò)事件的函數(shù)d i splayCs s，在用戶放開(kāi)c tr 1鍵時(shí)，所有元素取消對(duì)該事件的監(jiān)測(cè)。當(dāng)鼠標(biāo)在網(wǎng)頁(yè)中的坐標(biāo)處于網(wǎng)頁(yè)中第一 html元素的坐標(biāo)范圍之內(nèi)時(shí)，可將所述第一 html元素設(shè)置為第一目標(biāo)元素。

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

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

[0040]在接收到用戶的復(fù)制指令時(shí)，可復(fù)制所述CSS樣式鍵值對(duì)。例如，可在按住ctrl鍵的同時(shí)點(diǎn)擊鼠標(biāo)左鍵，通過(guò)第三方ZeroClipboard庫(kù)將getCss函數(shù)獲得的鍵值對(duì)復(fù)制到系統(tǒng)的粘貼板。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。