如何将css文件解析成xml格式或者是dom对象，方便对其属性进行操作？

Question

如何将css文件解析成xml格式或者是dom对象，方便对其属性进行操作？

Answer 1

你需要使用 JavaScript 解析 styleSheets，得到 cssRules 中每个 selectorText 和对应的 cssText。

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<style   type="text/css"> #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

<script type="text/javascript"> 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);" };

 

要改变属性值，需要对相应的 cssRule 进行操作，例如

1 2 3 4

// 设置 div 的边框为 dotted document.styleSheets[0].cssRules[2].style.borderStyle   = "dotted"; // 设置 div 的边框颜色为 #00f document.styleSheets[0].cssRules[2].style.borderColor   = "#00f";

这种方法可行但还是建议使用写好的专门解析 CSS 的 JavaScript 库，用起来很方便。

Google 一下 JSCSSP、CSS Parser、CSSOM、这些都是比较专业和成熟的 CSS 解析器。

 

Answer 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() );
}
}