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

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

CSS3

炎炎設(shè)計(jì) 2019-05-31 07:02:40

查看完整描述

3 回答

蠱毒傳說

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超3個(gè)贊

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

下面的例子是解析后放到一個(gè) 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>

這樣就得到一個(gè) json 對象，console.log 輸出的話會(huì)顯示

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 進(jìn)行操作，例如

1

2

3

4

// 設(shè)置 div 的邊框?yàn)?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-06-01

莫回?zé)o

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

如下所示：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() );
}
}