本發(fā)明涉及網(wǎng)頁設(shè)計(jì)技術(shù)領(lǐng)域，具體而言，涉及一種網(wǎng)頁元素樣式的設(shè)置方法及裝置。

背景技術(shù)：

目前，通過CSS渲染html最終呈現(xiàn)出頁面，其中，CSS是一個(gè)或多個(gè)文件放在頁面里，網(wǎng)頁元素表示頁面中一段html，網(wǎng)站設(shè)計(jì)編輯器中需要通過設(shè)置面板對(duì)網(wǎng)頁元素CSS樣式進(jìn)行設(shè)置，因而，設(shè)置面板需要顯示待設(shè)置網(wǎng)頁元素的樣式的屬性值，開發(fā)人員對(duì)該樣式的屬性值進(jìn)行修改，然后通過包含修改后屬性值的CSS渲染html最終呈現(xiàn)具有新樣式的頁面。

當(dāng)前，相關(guān)技術(shù)中提供了一種網(wǎng)頁元素樣式的設(shè)置方法，其中，該方法主要為：采用調(diào)用瀏覽器接口直接對(duì)網(wǎng)頁元素的樣式進(jìn)行設(shè)置的方式，首先，通過瀏覽器DOM接口直接從瀏覽器DOM對(duì)象中獲取網(wǎng)頁元素樣式的CSS值，然后，對(duì)該網(wǎng)頁元素樣式的CSS值進(jìn)行修改，或者，通過CSS文本解析或樣式表對(duì)象遍歷查找的方式進(jìn)行。由于瀏覽器提供程序接口讀取某個(gè)html節(jié)點(diǎn)(DOM對(duì)象)上的是瀏覽器計(jì)算后的樣式的屬性值，該樣式屬性值和CSS文件里的屬性值的表示形式可能存在一定的差異，比如：用戶設(shè)置某部分顏色為十六進(jìn)制形式如#FFFFFF，而通過瀏覽器DOM對(duì)象獲取的形式可能會(huì)是RGB(256,256,256),又如，用戶設(shè)置的百分比值獲取的可能會(huì)是像素值。

在實(shí)現(xiàn)本發(fā)明的過程中，發(fā)明人發(fā)現(xiàn)相關(guān)技術(shù)中至少存在以下問題：采用調(diào)用瀏覽器提供的接口直接從瀏覽器DOM對(duì)象中讀取網(wǎng)頁元素樣式的屬性值的方式，需要瀏覽器對(duì)屬性值進(jìn)行計(jì)算處理后再顯示，由于從瀏覽器DOM對(duì)象中獲取的屬性值是瀏覽器計(jì)算后的樣式的屬性值，導(dǎo)致在設(shè)置面板上顯示的網(wǎng)頁元素樣式的屬性值與層疊樣式表代碼中的屬性值表示形式不一致，不便于用戶對(duì)該屬性值進(jìn)行修改。

技術(shù)實(shí)現(xiàn)要素：

有鑒于此，本發(fā)明實(shí)施例的目的在于提供一種網(wǎng)頁元素樣式的設(shè)置方法及裝置，以解決相關(guān)技術(shù)中存在由于從瀏覽器DOM對(duì)象中獲取的屬性值是瀏覽器計(jì)算后的樣式的屬性值，導(dǎo)致在設(shè)置面板上顯示的網(wǎng)頁元素樣式的屬性值與層疊樣式表代碼中的屬性值表示形式不一致，不便于用戶對(duì)該屬性值進(jìn)行修改的問題。

第一方面，本發(fā)明實(shí)施例提供了一種網(wǎng)頁元素樣式的設(shè)置方法，該方法包括：

獲取網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，所述屬性數(shù)據(jù)包括所述網(wǎng)頁元素樣式的屬性名稱和屬性值；

在用于編輯所述網(wǎng)頁元素樣式的設(shè)置面板上以文本格式顯示所述屬性名稱和所述屬性值；

接收用戶對(duì)所述屬性值的修改，生成修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)；

根據(jù)修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)，更新相應(yīng)的所述網(wǎng)頁元素樣式的層疊樣式表代碼。

結(jié)合第一方面，本發(fā)明實(shí)施例提供了第一方面的第一種可能的實(shí)施方式，其中，所述獲取網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)之前，還包括：

將所述網(wǎng)頁元素樣式的層疊樣式表代碼轉(zhuǎn)換為數(shù)據(jù)交換格式的屬性數(shù)據(jù)；

存儲(chǔ)所述網(wǎng)頁元素樣式的所述層疊樣式表代碼和所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)。

結(jié)合第一方面的第一種可能的實(shí)施方式，本發(fā)明實(shí)施例提供了第一方面的第二種可能的實(shí)施方式，其中，所述將所述網(wǎng)頁元素樣式的層疊樣式表代碼轉(zhuǎn)換為數(shù)據(jù)交換格式的屬性數(shù)據(jù)，包括：

提取所述網(wǎng)頁元素樣式的層疊樣式表代碼中的選擇器和聲明；

將所述選擇器和所述聲明分別設(shè)置為網(wǎng)頁元素屬性和CSS樣式屬性的鍵值對(duì)；

將所述網(wǎng)頁元素屬性和所述CSS樣式屬性的鍵值對(duì)以數(shù)據(jù)交換格式進(jìn)行封裝，生成所述網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)。

結(jié)合第一方面的第二種可能的實(shí)施方式，本發(fā)明實(shí)施例提供了第一方面的第三種可能的實(shí)施方式，其中，所述提取所述網(wǎng)頁元素樣式的層疊樣式表代碼中的選擇器和聲明，包括：

通過正則表達(dá)式匹配所述網(wǎng)頁元素樣式的層疊樣式表代碼中的注釋文本，并將匹配獲得的注釋文本替換為空；

通過正則表達(dá)式匹配所述層疊樣式表代碼中成組的花括號(hào)前的文本，提取所述文本作為選擇器；

通過正則表達(dá)式匹配所述花括號(hào)內(nèi)的冒號(hào)，提取所述冒號(hào)及所述冒號(hào)前后的文本作為聲明。

結(jié)合第一方面，本發(fā)明實(shí)施例提供了第一方面的第四種可能的實(shí)施方式，其中，所述根據(jù)修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)，更新相應(yīng)的所述網(wǎng)頁元素樣式的層疊樣式表代碼，包括：

將修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)轉(zhuǎn)換為層疊樣式表代碼，利用轉(zhuǎn)換后的所述層疊樣式表代碼替換所述網(wǎng)頁元素樣式的層疊樣式表代碼；或者，

查找與所述網(wǎng)頁元素樣式對(duì)應(yīng)的DOM對(duì)象，將修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的所述屬性值設(shè)置到所述DOM對(duì)象對(duì)應(yīng)的節(jié)點(diǎn)上，通過DOM對(duì)象更新所述網(wǎng)頁元素樣式的層疊樣式表代碼。

結(jié)合第一方面至第一方面的第四種可能的實(shí)施方式中任一種實(shí)施方式，本發(fā)明實(shí)施例提供了第一方面的第五種可能的實(shí)施方式，其中，所述數(shù)據(jù)交換格式為JSON格式。

第二方面，本發(fā)明實(shí)施例還提供了一種網(wǎng)頁元素樣式的設(shè)置裝置，該裝置包括：

獲取模塊，用于獲取網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，所述屬性數(shù)據(jù)包括所述網(wǎng)頁元素樣式的屬性名稱和屬性值；

顯示模塊，用于在用于編輯所述網(wǎng)頁元素樣式的設(shè)置面板上以文本格式顯示所述屬性名稱和所述屬性值；

生成模塊，用于接收用戶對(duì)所述屬性值的修改，生成修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)；

更新模塊，用于根據(jù)修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)，更新相應(yīng)的所述網(wǎng)頁元素樣式的層疊樣式表代碼。

結(jié)合第二方面，本發(fā)明實(shí)施例提供了第二方面的第一種可能的實(shí)施方式，其中，所述裝置還包括：

轉(zhuǎn)換模塊，用于將所述網(wǎng)頁元素樣式的層疊樣式表代碼轉(zhuǎn)換為數(shù)據(jù)交換格式的屬性數(shù)據(jù)；

存儲(chǔ)模塊，用于存儲(chǔ)所述網(wǎng)頁元素樣式的所述層疊樣式表代碼和所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)。

結(jié)合第二方面的第一種可能的實(shí)施方式，本發(fā)明實(shí)施例提供了第二方面的第二種可能的實(shí)施方式，其中，所述轉(zhuǎn)換模塊包括：

提取子模塊，用于提取所述網(wǎng)頁元素樣式的層疊樣式表代碼中的選擇器和聲明；

設(shè)置子模塊，用于將所述選擇器和所述聲明分別設(shè)置為網(wǎng)頁元素屬性和CSS樣式屬性的鍵值對(duì)；

生成子模塊，用于將所述網(wǎng)頁元素屬性和所述CSS樣式屬性的鍵值對(duì)以數(shù)據(jù)交換格式進(jìn)行封裝，生成所述網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)。

結(jié)合第二方面的第二種可能的實(shí)施方式，本發(fā)明實(shí)施例提供了第二方面的第三種可能的實(shí)施方式，其中，所述提取子模塊，具體用于通過正則表達(dá)式匹配所述網(wǎng)頁元素樣式的層疊樣式表代碼中的注釋文本，并將匹配獲得的注釋文本替換為空；通過正則表達(dá)式匹配所述層疊樣式表代碼中成組的花括號(hào)前的文本，提取所述文本作為選擇器；通過正則表達(dá)式匹配所述花括號(hào)內(nèi)的冒號(hào)，提取所述冒號(hào)及所述冒號(hào)前后的文本作為聲明。

結(jié)合第二方面，本發(fā)明實(shí)施例提供了第二方面的第四種可能的實(shí)施方式，其中，所述更新模塊包括：

第一更新子模塊，用于將修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)轉(zhuǎn)換為層疊樣式表代碼，利用轉(zhuǎn)換后的所述層疊樣式表代碼替換所述網(wǎng)頁元素樣式的層疊樣式表代碼；或者，

第二更新子模塊，用于查找與所述網(wǎng)頁元素樣式對(duì)應(yīng)的DOM對(duì)象，將修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的所述屬性值設(shè)置到所述DOM對(duì)象對(duì)應(yīng)的節(jié)點(diǎn)上，通過DOM對(duì)象更新所述網(wǎng)頁元素樣式的層疊樣式表代碼。

結(jié)合第二方面至第二方面的第四種可能的實(shí)施方式中任一種實(shí)施方式，本發(fā)明實(shí)施例提供了第二方面的第五種可能的實(shí)施方式，其中，所述數(shù)據(jù)交換格式為JSON格式。

在本發(fā)明實(shí)施例提供的網(wǎng)頁元素樣式的設(shè)置方法及裝置中，獲取網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，該屬性數(shù)據(jù)包括網(wǎng)頁元素樣式的屬性名稱和屬性值；在用于編輯網(wǎng)頁元素樣式的設(shè)置面板上以文本格式顯示上述屬性名稱和上述屬性值；接收用戶對(duì)屬性值的修改，生成修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)；根據(jù)修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，更新相應(yīng)的網(wǎng)頁元素樣式的層疊樣式表代碼。本發(fā)明實(shí)施例通過獲取預(yù)先存儲(chǔ)的與網(wǎng)頁元素樣式的層疊樣式表代碼對(duì)應(yīng)的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，在網(wǎng)頁元素樣式設(shè)置過程中直接以文本格式回顯該數(shù)據(jù)交換格式的屬性數(shù)據(jù)，并接收用戶對(duì)該數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的屬性值的修改，能夠保證回顯的屬性值與原層疊樣式表代碼中屬性值的一致性。

為使本發(fā)明的上述目的、特征和優(yōu)點(diǎn)能更明顯易懂，下文特舉較佳實(shí)施例，并配合所附附圖，作詳細(xì)說明如下。

附圖說明

為了更清楚地說明本發(fā)明實(shí)施例的技術(shù)方案，下面將對(duì)實(shí)施例中所需要使用的附圖作簡(jiǎn)單地介紹，應(yīng)當(dāng)理解，以下附圖僅示出了本發(fā)明的某些實(shí)施例，因此不應(yīng)被看作是對(duì)范圍的限定，對(duì)于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他相關(guān)的附圖。

圖1示出了本發(fā)明實(shí)施例所提供的一種網(wǎng)頁元素樣式的設(shè)置方法的流程示意圖；

圖2示出了本發(fā)明實(shí)施例所提供的另一種網(wǎng)頁元素樣式的設(shè)置方法的流程示意圖；

圖3示出了本發(fā)明實(shí)施例所提供的一種網(wǎng)頁元素樣式的設(shè)置裝置的結(jié)構(gòu)示意圖；

圖4示出了本發(fā)明實(shí)施例所提供的另一種網(wǎng)頁元素樣式的設(shè)置裝置的結(jié)構(gòu)示意圖。

具體實(shí)施方式

為使本發(fā)明實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本發(fā)明實(shí)施例中附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例。通常在此處附圖中描述和示出的本發(fā)明實(shí)施例的組件可以以各種不同的配置來布置和設(shè)計(jì)。因此，以下對(duì)在附圖中提供的本發(fā)明的實(shí)施例的詳細(xì)描述并非旨在限制要求保護(hù)的本發(fā)明的范圍，而是僅僅表示本發(fā)明的選定實(shí)施例?；诒景l(fā)明的實(shí)施例，本領(lǐng)域技術(shù)人員在沒有做出創(chuàng)造性勞動(dòng)的前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

考慮到相關(guān)技術(shù)中存在由于從瀏覽器DOM對(duì)象中獲取的屬性值是瀏覽器計(jì)算后的樣式的屬性值，導(dǎo)致在設(shè)置面板上顯示的網(wǎng)頁元素樣式的屬性值與層疊樣式表代碼中的屬性值表示形式不一致，不便于用戶對(duì)該屬性值進(jìn)行修改的問題?；诖?，本發(fā)明實(shí)施例提供了一種網(wǎng)頁元素樣式的設(shè)置方法及裝置，下面通過實(shí)施例進(jìn)行描述。

如圖1所示，本發(fā)明實(shí)施例提供了一種網(wǎng)頁元素樣式的設(shè)置方法，該方法包括步驟S102-S108，具體如下：

步驟S102：獲取網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，所述屬性數(shù)據(jù)包括所述網(wǎng)頁元素樣式的屬性名稱和屬性值，該數(shù)據(jù)交換格式的屬性數(shù)據(jù)與網(wǎng)頁元素樣式的CSS代碼一一對(duì)應(yīng)；

步驟S104：在用于編輯所述網(wǎng)頁元素樣式的設(shè)置面板上以文本格式顯示所述屬性名稱和所述屬性值；

步驟S106：接收用戶對(duì)所述屬性值的修改，生成修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)；

步驟S108：根據(jù)修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)，更新相應(yīng)的所述網(wǎng)頁元素樣式的層疊樣式表代碼，再將更新后的層疊樣式表代碼渲染html呈現(xiàn)出頁面，此時(shí)頁面將呈現(xiàn)新的網(wǎng)頁元素樣式。

其中，上述網(wǎng)頁元素可以是網(wǎng)頁頁面，也可以是網(wǎng)頁組件，考慮到JSON格式便于JavaScript操作，上述數(shù)據(jù)交換格式可以是JSON格式，JSON(JavaScript Object Notation，JavaScript原生格式)采用完全獨(dú)立于語言的文本格式，JSON成為理想的數(shù)據(jù)交換語言。

在本發(fā)明提供的實(shí)施例中，通過獲取預(yù)先存儲(chǔ)的與網(wǎng)頁元素樣式的層疊樣式表代碼對(duì)應(yīng)的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，在網(wǎng)頁元素樣式設(shè)置過程中直接以文本格式回顯該數(shù)據(jù)交換格式的屬性數(shù)據(jù)，并接收用戶對(duì)該數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的屬性值的修改，能夠保證回顯的屬性值與原層疊樣式表代碼中屬性值的一致性，同時(shí)，無需瀏覽器對(duì)屬性值進(jìn)行計(jì)算處理，簡(jiǎn)化了網(wǎng)頁元素樣式的回顯與設(shè)置過程，另外，對(duì)網(wǎng)頁元素樣式進(jìn)行修改時(shí)，直接對(duì)顯示的數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的屬性值進(jìn)行修改，省去了每次修改都對(duì)CSS代碼進(jìn)行解析的過程，減少了CSS代碼解析次數(shù)，提高了整體性能。

進(jìn)一步的，如圖2所示，在上述步驟S102獲取網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)之前，還包括：

步驟S202：將所述網(wǎng)頁元素樣式的層疊樣式表代碼轉(zhuǎn)換為數(shù)據(jù)交換格式的屬性數(shù)據(jù)；

步驟S204：存儲(chǔ)所述網(wǎng)頁元素樣式的所述層疊樣式表代碼和所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)。

在本發(fā)明提供的實(shí)施例中，利用CSS代碼文本轉(zhuǎn)換為JSON對(duì)象的解析程序預(yù)先將各個(gè)網(wǎng)頁元素樣式的CSS代碼轉(zhuǎn)換為數(shù)據(jù)交換格式(如，JSON格式)，以網(wǎng)頁元素的維度建立并存儲(chǔ)各個(gè)網(wǎng)頁元素樣式的CSS代碼形式的屬性數(shù)據(jù)與數(shù)據(jù)交換格式的屬性數(shù)據(jù)的映射關(guān)系，即對(duì)網(wǎng)站設(shè)計(jì)編輯器中網(wǎng)頁元素樣式的CSS屬性數(shù)據(jù)進(jìn)行抽象，建立并存儲(chǔ)抽象數(shù)據(jù)，該抽象數(shù)據(jù)為數(shù)據(jù)交換格式的屬性數(shù)據(jù)，以便后續(xù)對(duì)網(wǎng)頁元素樣式進(jìn)行修改過程中，直接以文本格式顯示待修改的網(wǎng)頁元素樣式的屬性數(shù)據(jù)，從而能夠保證回顯的屬性值與原層疊樣式表代碼中屬性值的一致性，便于用戶直觀地對(duì)網(wǎng)頁樣式的屬性值進(jìn)行修改。

其中，CSS(Cascading Style Sheets，層疊樣式表)代碼，簡(jiǎn)稱CSS樣式表，又被稱為CSS樣式，CSS樣式作為一種能制作出各種樣式網(wǎng)頁的技術(shù)，在網(wǎng)頁制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制；JSON結(jié)構(gòu)的格式就是若干個(gè)鍵/值(key,value)對(duì)的集合，該集合可以理解為字典(Dictionary)，每個(gè)鍵/值對(duì)可以理解成一個(gè)對(duì)象(Object)。鍵/值對(duì)中的鍵(key)一般是一個(gè)string，值(value)可以是string、double、int等基本類型，也可以嵌套一個(gè)JSON對(duì)象(鍵/值對(duì))，也可以是一個(gè)數(shù)組，數(shù)組里面的數(shù)據(jù)的類型可以是基本類型，或者鍵/值對(duì)。

具體的，所述將所述網(wǎng)頁元素樣式的層疊樣式表代碼轉(zhuǎn)換為數(shù)據(jù)交換格式的屬性數(shù)據(jù)，具體包括：

提取所述網(wǎng)頁元素樣式的層疊樣式表代碼中的選擇器和聲明；

將所述選擇器和所述聲明分別設(shè)置為網(wǎng)頁元素屬性和CSS樣式屬性的鍵值對(duì)；

將所述網(wǎng)頁元素屬性和所述CSS樣式屬性的鍵值對(duì)以數(shù)據(jù)交換格式進(jìn)行封裝，生成所述網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)。

其中，所述提取所述網(wǎng)頁元素樣式的層疊樣式表代碼中的選擇器和聲明，包括：

通過正則表達(dá)式匹配所述網(wǎng)頁元素樣式的層疊樣式表代碼中的注釋文本，并將匹配獲得的注釋文本替換為空；

通過正則表達(dá)式匹配所述層疊樣式表代碼中成組的花括號(hào)前的文本，提取所述文本作為選擇器；

通過正則表達(dá)式匹配所述花括號(hào)內(nèi)的冒號(hào)，提取所述冒號(hào)及所述冒號(hào)前后的文本作為聲明。

舉例說明，網(wǎng)頁元素樣式的層疊樣式表代碼(CSS代碼)，如：

#id{

color:red

}

網(wǎng)頁元素樣式的json格式數(shù)據(jù)，如：

結(jié)合上述程序代碼可知，‘elem’：后內(nèi)容表示選擇器(網(wǎng)頁元素屬性#id)，‘css’：后花括號(hào)中內(nèi)容表示聲明(CSS樣式屬性的鍵值對(duì))，即將選擇器放入‘elem’屬性，css屬性以鍵值對(duì)的對(duì)象方式放入‘css’屬性。

進(jìn)一步的，所述根據(jù)修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)，更新相應(yīng)的所述網(wǎng)頁元素樣式的層疊樣式表代碼，包括：

將修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)轉(zhuǎn)換為層疊樣式表代碼，利用轉(zhuǎn)換后的所述層疊樣式表代碼替換所述網(wǎng)頁元素樣式的層疊樣式表代碼；或者，

查找與所述網(wǎng)頁元素樣式對(duì)應(yīng)的DOM對(duì)象，將修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的所述屬性值設(shè)置到所述DOM對(duì)象對(duì)應(yīng)的節(jié)點(diǎn)上，通過DOM對(duì)象更新所述網(wǎng)頁元素樣式的層疊樣式表代碼。

在本發(fā)明提供的實(shí)施例中，給出了兩種根據(jù)修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)更新相應(yīng)的網(wǎng)頁元素樣式的層疊樣式表代碼的方式，一種為直接利用JSON對(duì)象轉(zhuǎn)換為CSS代碼文本的生成程序通過循環(huán)對(duì)象，字符串拼接的方式生成，將修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)轉(zhuǎn)換為層疊樣式表代碼，即利用生成程序?qū)⑿薷暮蟮腏SON格式屬性數(shù)據(jù)轉(zhuǎn)換為CSS代碼；另一種為查找與網(wǎng)頁元素樣式對(duì)應(yīng)的DOM對(duì)象，將修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的屬性值設(shè)置到該DOM對(duì)象對(duì)應(yīng)的節(jié)點(diǎn)上，以實(shí)現(xiàn)對(duì)原CSS代碼中的屬性值進(jìn)行更新，即通過JSON格式的屬性數(shù)據(jù)中‘elem’部分選中要修改的DOM對(duì)象，把‘css’數(shù)據(jù)直接設(shè)置到頁面中對(duì)應(yīng)的DOM節(jié)點(diǎn)上(將聲明復(fù)制給相應(yīng)的DOM節(jié)點(diǎn))。

在本發(fā)明實(shí)施例提供的網(wǎng)頁元素樣式的設(shè)置方法中，獲取網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，該屬性數(shù)據(jù)包括網(wǎng)頁元素樣式的屬性名稱和屬性值；在用于編輯網(wǎng)頁元素樣式的設(shè)置面板上以文本格式顯示上述屬性名稱和上述屬性值；接收用戶對(duì)屬性值的修改，生成修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)；根據(jù)修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，更新相應(yīng)的網(wǎng)頁元素樣式的層疊樣式表代碼。本發(fā)明實(shí)施例通過獲取預(yù)先存儲(chǔ)的與網(wǎng)頁元素樣式的層疊樣式表代碼對(duì)應(yīng)的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，在網(wǎng)頁元素樣式設(shè)置過程中直接以文本格式回顯該數(shù)據(jù)交換格式的屬性數(shù)據(jù)，并接收用戶對(duì)該數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的屬性值的修改，能夠保證回顯的屬性值與原層疊樣式表代碼中屬性值的一致性。

本發(fā)明實(shí)施例還提供了一種網(wǎng)頁元素樣式的設(shè)置裝置，如圖3所示，該裝置包括：

獲取模塊302，用于獲取網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，所述屬性數(shù)據(jù)包括所述網(wǎng)頁元素樣式的屬性名稱和屬性值；

顯示模塊304，用于在用于編輯所述網(wǎng)頁元素樣式的設(shè)置面板上以文本格式顯示所述屬性名稱和所述屬性值；

生成模塊306，用于接收用戶對(duì)所述屬性值的修改，生成修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)；

更新模塊308，用于根據(jù)修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)，更新相應(yīng)的所述網(wǎng)頁元素樣式的層疊樣式表代碼。

在本發(fā)明提供的實(shí)施例中，通過獲取預(yù)先存儲(chǔ)的與網(wǎng)頁元素樣式的層疊樣式表代碼對(duì)應(yīng)的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，在網(wǎng)頁元素樣式設(shè)置過程中直接以文本格式回顯該數(shù)據(jù)交換格式的屬性數(shù)據(jù)，并接收用戶對(duì)該數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的屬性值的修改，能夠保證回顯的屬性值與原層疊樣式表代碼中屬性值的一致性。

進(jìn)一步的，如圖4所示，所述裝置還包括：

轉(zhuǎn)換模塊402，用于將所述網(wǎng)頁元素樣式的層疊樣式表代碼轉(zhuǎn)換為數(shù)據(jù)交換格式的屬性數(shù)據(jù)；

存儲(chǔ)模塊404，用于存儲(chǔ)所述網(wǎng)頁元素樣式的所述層疊樣式表代碼和所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)。

進(jìn)一步的，所述轉(zhuǎn)換模塊402包括：

提取子模塊，用于提取所述網(wǎng)頁元素樣式的層疊樣式表代碼中的選擇器和聲明；

設(shè)置子模塊，用于將所述選擇器和所述聲明分別設(shè)置為網(wǎng)頁元素屬性和CSS樣式屬性的鍵值對(duì)；

生成子模塊，用于將所述網(wǎng)頁元素屬性和所述CSS樣式屬性的鍵值對(duì)以數(shù)據(jù)交換格式進(jìn)行封裝，生成所述網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)。

進(jìn)一步的，所述提取子模塊，具體用于，通過正則表達(dá)式匹配所述網(wǎng)頁元素樣式的層疊樣式表代碼中的注釋文本，并將匹配獲得的注釋文本替換為空；通過正則表達(dá)式匹配所述層疊樣式表代碼中成組的花括號(hào)前的文本，提取所述文本作為選擇器；通過正則表達(dá)式匹配所述花括號(hào)內(nèi)的冒號(hào)，提取所述冒號(hào)及所述冒號(hào)前后的文本作為聲明。

進(jìn)一步的，所述更新模塊308包括：

第一更新子模塊，用于將修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)轉(zhuǎn)換為層疊樣式表代碼，利用轉(zhuǎn)換后的所述層疊樣式表代碼替換所述網(wǎng)頁元素樣式的層疊樣式表代碼；或者，

第二更新子模塊，用于查找與所述網(wǎng)頁元素樣式對(duì)應(yīng)的DOM對(duì)象，將修改后的所述數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的所述屬性值設(shè)置到所述DOM對(duì)象對(duì)應(yīng)的節(jié)點(diǎn)上，通過DOM對(duì)象更新所述網(wǎng)頁元素樣式的層疊樣式表代碼。

進(jìn)一步的，所述數(shù)據(jù)交換格式為JSON格式。

在本發(fā)明實(shí)施例提供的網(wǎng)頁元素樣式的設(shè)置裝置中，利用獲取模塊302獲取網(wǎng)頁元素樣式的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，該屬性數(shù)據(jù)包括網(wǎng)頁元素樣式的屬性名稱和屬性值；在利用顯示模塊304在用于編輯網(wǎng)頁元素樣式的設(shè)置面板上以文本格式顯示上述屬性名稱和上述屬性值；然后利用生成模塊306接收用戶對(duì)屬性值的修改，生成修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)；最后利用更新模塊308根據(jù)修改后的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，更新相應(yīng)的網(wǎng)頁元素樣式的層疊樣式表代碼。本發(fā)明實(shí)施例通過獲取預(yù)先存儲(chǔ)的與網(wǎng)頁元素樣式的層疊樣式表代碼對(duì)應(yīng)的數(shù)據(jù)交換格式的屬性數(shù)據(jù)，在網(wǎng)頁元素樣式設(shè)置過程中直接以文本格式回顯該數(shù)據(jù)交換格式的屬性數(shù)據(jù)，并接收用戶對(duì)該數(shù)據(jù)交換格式的屬性數(shù)據(jù)中的屬性值的修改，能夠保證回顯的屬性值與原層疊樣式表代碼中屬性值的一致性。

本發(fā)明實(shí)施例所提供的網(wǎng)頁元素樣式的設(shè)置裝置可以為設(shè)備上的特定硬件或者安裝于設(shè)備上的軟件或固件等。本發(fā)明實(shí)施例所提供的裝置，其實(shí)現(xiàn)原理及產(chǎn)生的技術(shù)效果和前述方法實(shí)施例相同，為簡(jiǎn)要描述，裝置實(shí)施例部分未提及之處，可參考前述方法實(shí)施例中相應(yīng)內(nèi)容。所屬領(lǐng)域的技術(shù)人員可以清楚地了解到，為描述的方便和簡(jiǎn)潔，前述描述的系統(tǒng)、裝置和單元的具體工作過程，均可以參考上述方法實(shí)施例中的對(duì)應(yīng)過程，在此不再贅述。

在本發(fā)明所提供的實(shí)施例中，應(yīng)該理解到，所揭露裝置和方法，可以通過其它的方式實(shí)現(xiàn)。以上所描述的裝置實(shí)施例僅僅是示意性的，例如，所述單元的劃分，僅僅為一種邏輯功能劃分，實(shí)際實(shí)現(xiàn)時(shí)可以有另外的劃分方式，又例如，多個(gè)單元或組件可以結(jié)合或者可以集成到另一個(gè)系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點(diǎn)，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些通信接口，裝置或單元的間接耦合或通信連接，可以是電性，機(jī)械或其它的形式。

所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個(gè)地方，或者也可以分布到多個(gè)網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實(shí)際的需要選擇其中的部分或者全部單元來實(shí)現(xiàn)本實(shí)施例方案的目的。

另外，在本發(fā)明提供的實(shí)施例中的各功能單元可以集成在一個(gè)處理單元中，也可以是各個(gè)單元單獨(dú)物理存在，也可以兩個(gè)或兩個(gè)以上單元集成在一個(gè)單元中。

所述功能如果以軟件功能單元的形式實(shí)現(xiàn)并作為獨(dú)立的產(chǎn)品銷售或使用時(shí)，可以存儲(chǔ)在一個(gè)計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中。基于這樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分或者該技術(shù)方案的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計(jì)算機(jī)軟件產(chǎn)品存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)中，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例所述方法的全部或部分步驟。而前述的存儲(chǔ)介質(zhì)包括：U盤、移動(dòng)硬盤、只讀存儲(chǔ)器(Read-Only Memory，ROM)、隨機(jī)存取存儲(chǔ)器(Random Access Memory，RAM)、磁碟或者光盤等各種可以存儲(chǔ)程序代碼的介質(zhì)。

應(yīng)注意到：相似的標(biāo)號(hào)和字母在下面的附圖中表示類似項(xiàng)，因此，一旦某一項(xiàng)在一個(gè)附圖中被定義，則在隨后的附圖中不需要對(duì)其進(jìn)行進(jìn)一步定義和解釋，此外，術(shù)語“第一”、“第二”、“第三”等僅用于區(qū)分描述，而不能理解為指示或暗示相對(duì)重要性。

最后應(yīng)說明的是：以上所述實(shí)施例，僅為本發(fā)明的具體實(shí)施方式，用以說明本發(fā)明的技術(shù)方案，而非對(duì)其限制，本發(fā)明的保護(hù)范圍并不局限于此，盡管參照前述實(shí)施例對(duì)本發(fā)明進(jìn)行了詳細(xì)的說明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解：任何熟悉本技術(shù)領(lǐng)域的技術(shù)人員在本發(fā)明揭露的技術(shù)范圍內(nèi)，其依然可以對(duì)前述實(shí)施例所記載的技術(shù)方案進(jìn)行修改或可輕易想到變化，或者對(duì)其中部分技術(shù)特征進(jìn)行等同替換；而這些修改、變化或者替換，并不使相應(yīng)技術(shù)方案的本質(zhì)脫離本發(fā)明實(shí)施例技術(shù)方案的精神和范圍。都應(yīng)涵蓋在本發(fā)明的保護(hù)范圍之內(nèi)。因此，本發(fā)明的保護(hù)范圍應(yīng)所述以權(quán)利要求的保護(hù)范圍為準(zhǔn)。