在Web頁面片段剪切和混搭中處理CSS的方法和系統的製作方法

2023-04-23 10:48:56

><styls〉#wrapper—idtable{margin:Opt;padding:OptOpt0.5em;color:rgb(68,68，68);display:inline;#wrapper—idtabletr{color:rgb(6S,68，68);13#wrapper—idtabletrtd{font-size:85%;font-weight:normal;<tr〉<td〉sometextsometext</tr〉</table〉這裡，用元素〈DIVM乍為封裝器，並為該元素分配一個唯一的ID:wrapper一id。通過增加封裝器作為容器，來修改table樣式和tr、td樣式的選擇符。然後，將table的樣式和tr、td的樣式封裝進一個CSS文件或塊，並將CSS文件或塊連結到封裝器。在本發明的一個實施方式中，在步驟S216之前，將片段根節點和片段子節點從DOM樹中剪切出來。在本發明的另一個實施方式中，在步驟S216之後，將片段根節點和片段子節點從DOM樹中剪切出來。圖6示出了根據本發明的一種實施方式的、用於在Web頁面片段剪切和混搭中對CSS進行處理的系統的方框圖。如圖6所示，該系統600包括解析和構造裝置610,用於解析該Web頁面，並構造相應的DOM樹；識別裝置620,用於識別希望從該Web頁面剪切出的至少一個片段，從而找到片段的片段根節點和片段子節點；發現裝置630，用於發現從片段根節點到DOM樹根節點的片段根節點的祖先節點；獲得裝置640,用於獲得片段子節點、片段根節點、片段根節點的祖先節點的樣式的指定值；計算裝置650,用於為片段根節點的樣式計算這樣一個計算值，該計算值不但繼承了片段根節點的祖先節點的樣式的指定值，而且結合了片段14根節點本身的樣式的指定值；處理裝置660，用於對片段根節點的樣式的計算值和/或片段子節點的樣式的指定值進行處理；關聯裝置670,用於將處理後的片段根節點的樣式的計算值和片段子節點的樣式的指定值關聯到DOM樹的該片段，使得與混搭WEB頁面的其他片段的樣式不互相影響。例如，處理裝置660考慮布局因素，對片段根節點的樣式的計算值進行處理。如果片段根節點的樣式中具有位置樣式，那麼將位置樣式從中移除。將位置樣式從片段根節點的樣式中移除，是為了避免可能與其他剪切的片段重疊。此外，如果有，計算片段根節點的不但與其祖先節點相關，而且與其兄弟節點相關的屬性樣式(例如大小樣式)信息。在本發明的另一個實施方式中，處理裝置660根據用戶的指令，修改片段根節點的樣式的計算值和/或片段子節點的樣式的指定值。例如，用戶可能希望將剪切的片段中的某個段落的文字的顏色從原來的紅色變成綠色。本領域的技術人員應當理解，處理裝置660不是必需的，而是可選的。在本發明的一個實施方式中，關聯裝置670將片段根節點的樣式的計算值和片段子節點的樣式的指定值以內聯樣式的形式插入到DOM樹中。在本發明的又一個實施方式中，關聯裝置670用一個元素作為封裝器，來封裝片段根節點和片段子節點，並為該元素分配一個唯一的能識別它的標識，通過增加封裝器作為容器，來修改片段根節點的樣式和片段子節點的樣式的選擇符，然後，將片段根節點的樣式和片段子節點的樣式封裝進一個CSS文件或塊，並將CSS文件或塊連結到封裝器。在本發明的一個實施方式中，獲得裝置640通過查找事先準備好的映射有Web頁面的所有CSS樣式的樣式列表，獲得片段子節點、片段根節點、片段根節點的祖先節點的樣式的指定值。應當注意，為了使本發明更容易理解，上面的描述省略了對於本領域的技術人員來說是公知的、並且對於本發明的實現可能是必需的更具體的一些技術細節。提供本發明的說明書的目的是為了說明和描述，而不是用來窮舉或將本發明限制為所公開的形式。對本領域的普通技術人員而言，許多修改和變更都是顯而易見的。本領域技術人員還應該理解，可以通過軟體、硬體、固件或者它們的結合的方式，來實現本發明實施例中的方法和裝置。例如，本發明可以實現為一種電腦程式產品，包含存儲在計算機可讀的介質上的程序代碼，其在被計算機執行時執行本發明實施例中所述的方法。因此，選擇並描述實施方式是為了更好地解釋本發明的原理及其實際應用，並使本領域普通技術人員明白，在不脫離本發明實質的前提下，所有修改和變更均落入由權利要求所限定的本發明的保護範圍之內。權利要求1.一種用於在Web頁面片段剪切和混搭中對層疊樣式表CSS進行處理的方法，包括a)解析Web頁面，並構造相應的文檔對象模型DOM樹；b)識別希望從該Web頁面剪切出的至少一個片段，從而找到片段的片段根節點和片段子節點；c)發現從片段根節點到DOM樹根節點的片段根節點的祖先節點；d)獲得片段子節點、片段根節點、片段根節點的祖先節點的樣式的指定值；e)為片段根節點的樣式計算這樣一個計算值，該計算值不但繼承了片段根節點的祖先節點的樣式的指定值，而且結合了片段根節點本身的樣式的指定值；f)將片段根節點的樣式的計算值和片段子節點的樣式的指定值關聯到DOM樹的該片段，使得與混搭WEB頁面的其他片段的樣式不互相影響。2.根據權利要求1所述的方法，其中在步驟e)和步驟f)之間，還包括步驟g)對片段根節點的樣式的計算值和/或片段子節點的樣式的指定值進行處理。3.根據權利要求2所述的方法，其中步驟g)包括從片段根節點的樣式中移除位置樣式。4.根據權利要求2所述的方法，其中步驟g)包括計算片段根節點的不但與其祖先節點相關，而且與其兄弟節點相關的屬性樣式信息。5.根據權利要求2所述的方法，其中步驟g)包括根據用戶的指令，修改片段根節點的樣式的計算值和/或片段子節點的樣式的指定值。6.根據權利要求1所述的方法，其中步驟f)包括將片段根節點的樣式的計算值和片段子節點的樣式的指定值以內聯樣式的形式插入到DOM樹中。7.根據權利要求1所述的方法，其中在步驟f)包括用一個元素作為封裝器，來封裝片段根節點和片段子節點，並為該元素分配一個唯一的能識別它的標識，通過增加封裝器作為容器，來修改片段根節點的樣式和片段子節點的樣式的選擇符，然後，將片段根節點的樣式和片段子節點的樣式封裝進一個CSS文件或塊，並將CSS文件或塊連結到封裝器。8.根據權利要求1所述的方法，其中通過查找事先準備好的映射有Web頁面的所有CSS樣式的樣式列表，獲得片段子節點、片段根節點、片段根節點的祖先節點的樣式的指定值。9.一種用於在Web頁面片段剪切和混搭中對層疊樣式表CSS進行處理的系統，包括解析和構造裝置，用於解析該Web頁面，並構造相應的文檔對象模型DOM樹；識別裝置，用於識別希望從該Web頁面剪切出的至少一個片段，從而找到片段的片段根節點和片段子節點；發現裝置，用於發現從片段根節點到DOM樹根節點的片段根節點的祖先節點；獲得裝置，用於獲得片段子節點、片段根節點、片段根節點的祖先節點的樣式的指定值；計算裝置，用於為片段根節點的樣式計算這樣一個計算值，該計算值不但繼承了片段根節點的祖先節點的樣式的指定值，並且結合了片段根節點本身的樣式的指定值；關聯裝置，用於將片段根節點的樣式的計算值和片段子節點的樣式的指定值關聯到DOM樹的該片段，使得與混搭WEB頁面的其他片段的樣式不互相影響。10.根據權利要求9所述的系統，其中在計算裝置和關聯裝置之間還包括處理裝置，用於對片段根節點的樣式的計算值和/或片段子節點的樣式的指定值進行處理。11.根據權利要求IO所述的系統，其中處理裝置用於從片段根節點的樣式中移除位置樣式。12.根據權利要求IO所述的系統，其中處理裝置用於計算片段根節點的不但與其祖先節點相關，而且與其兄弟節點相關的屬性樣式信息。13.根據權利要求IO所述的系統，其中處理裝置用於根據用戶的指令，修改片段根節點的樣式的計算值和/或片段子節點的樣式的指定值。14.根據權利要求9所述的系統，其中關聯裝置用於將片段根節,泉的樣式的計算值和片段子節點的樣式的指定值以內聯樣式的形式插入到DOM樹中。15.根據權利要求9所述的系統，其中關聯裝置用於用一個元素作為封裝器，來封裝片段根節點和片段子節點，並為該元素分配一個唯一的能識別它的標識，通過增加封裝器作為容器，來修改片段根節點的樣式和片段子節點的樣式的選擇符，然後，將片段根節點的樣式和片段子節點的樣式封裝進一個CSS文件或塊，並將CSS文件或塊連結到封裝器。16.根據權利要求9所述的系統，其中獲得裝置用於通過查找事先準備好的映射有Web頁面的所有CSS樣式的樣式列表，獲得片段子節點、片段根節點、片段根節點的祖先節點的樣式的指定值。全文摘要本發明公開了用於在Web頁面片段剪切和混搭中對CSS進行處理的方法和系統。該方法包括解析該Web頁面，並構造相應的DOM樹；識別希望從該Web頁面剪切出的至少一個片段，從而找到片段的片段根節點和片段子節點；發現從片段根節點到DOM樹根節點的片段根節點的祖先節點；獲得片段子節點、片段根節點、片段根節點的祖先節點的樣式的指定值；為片段根節點的樣式計算這樣一個計算值，該計算值不但繼承了片段根節點的祖先節點的樣式的指定值，而且結合了片段根節點本身的樣式的指定值；將片段根節點的樣式的計算值和片段子節點的樣式的指定值關聯到DOM樹的該片段，使得與混搭WEB頁面的其他片段的樣式不互相影響。文檔編號G06F17/30GK101685447SQ200810166018公開日2010年3月31日申請日期2008年9月28日優先權日2008年9月28日發明者付榮耀,俞益琴,強張,趙石頑,偉高申請人:國際商業機器公司