首頁猿問如何將css文件解析成xml格式或...

如何將css文件解析成xml格式或者是dom對象，方便對其屬性進行操作？

CSS3

搖曳的薔薇 2019-04-03 10:01:30

查看完整描述

3 回答

慕桂英546537

TA貢獻1848條經(jīng)驗獲得超10個贊

你需要使用 JavaScript 解析 styleSheets，得到 cssRules 中每個 selectorText 和對應(yīng)的 cssText。

下面的例子是解析后放到一個 json 對象中。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

#foo {

background: #f00;

width: 200px;

height: 200px;

}

.bar {

float: left;

clear: both;

padding: 20px;

}

div {

border: 10px solid #f00;

}

</style>

1

2

3

4

5

6

7

8

9

10

11

var rules = {};

var ss = document.styleSheets;

for(var i = 0; i < ss.length; i++) {

for(var a = 0; a < ss[i].cssRules.length; a++) {

var txt = ss[i].cssRules[a].cssText.match(/{(.*)}$/i),

value = txt[1].replace(/^\s+|\s+$/g, '');

rules[ss[i].cssRules[a].selectorText] = value;

}

</script>

這樣就得到一個 json 對象，console.log 輸出的話會顯示

1

2

3

4

5

rules = {

#foo: "width: 200px; height: 200px;",

.bar: "float: left; clear: both, padding: 20px;",

div: "border: 10px solid rgb(255, 0, 0);"

};

要改變屬性值，需要對相應(yīng)的 cssRule 進行操作，例如

1

2

3

4

// 設(shè)置 div 的邊框為 dotted

document.styleSheets[0].cssRules[2].style.borderStyle = "dotted";

// 設(shè)置 div 的邊框顏色為 #00f

document.styleSheets[0].cssRules[2].style.borderColor = "#00f";

這種方法可行但還是建議使用寫好的專門解析 CSS 的 JavaScript 庫，用起來很方便。

Google 一下 JSCSSP、CSS Parser、CSSOM、這些都是比較專業(yè)和成熟的 CSS 解析器。

反對回復(fù) 2019-04-04

一只斗牛犬

TA貢獻1784條經(jīng)驗獲得超2個贊

如下所示：public void transformDomToXml(Document document,String FileName)
{
try{
TransformerFactory tFactory = TransformerFactory.newInstance();
Transformer transformer = tFactory.newTransformer();
DOMSource source = new DOMSource(document);
StreamResult result = new StreamResult(new File(FileName));
transformer.transform(source,result);
}catch (TransformerConfigurationException tce) {
System.out.println(" " + tce.getMessage() );
}catch (TransformerException te) {
System.out.println(" " + te.getMessage() );
}
}