如何解析带css样式的xml文件,并替换里面的

html-css016

如何解析带css样式的xml文件,并替换里面的,第1张

XSL提供两种机制来联合样式表:

1.样式表导入,允许样式表之间相互引用

2.样式表包含,允许样式表被原文组合.

样式表导入

一个XSL样式表可以包含xsl:import元素.所有xsl:import元素必须出现在样式表的开头. xsl:import元素有一个 href 属性,它的值就表示要导入的样式表的URI. 相对URI是指相对于xsl:import元素的基URI.

<xsl:stylesheet xmlns:xsl="">

<xsl:import href="article.xsl"/>

<xsl:import href="bigfont.xsl"/>

<xsl:define-attribute-set name="note-style">

<xsl:attribute-set font-posture="italic"/>

</xsl:define-attribute-set>

</xsl:stylesheet>

导向的样式表中的规则和定义比任何被导入样式表中的规则和定义都要重要.同样,一被导入的样式表中的规则和定义比之前导入的样式表中的规则和定义都要重要.一般来说,更重要的规则或定义比次重要的规则或定义要优先.每一类的规则和定义都会详细规定它.

样式表包含

一个样式表中可以用xsl:include元素来包含另一个XSL样式表. xsl:include也有href 属性,它的值就表示被包含的样式表的URI. 相对URI是指相对于xsl:include元素的基URI. xsl:include元素可以作为xsl:stylesheet元素的子元素,出现在任何xsl:import之后.在XML树的层次在上该包含生效.由href属性值定位的资源内容作为一个XML文档解析,在该文档中的xsl:stylesheet元素的子元素替代包含文档的xsl:include元素.同时在被包含的文档的xsl:import元素在包含文档中移上至任一存在的xsl:import元素之后. 不象xsl:import,被包含的规则或定义不影响他们被处理的方式.

嵌入样式表

通常一个样式表就是一个完整的XML文档,xsl:stylesheet元素作为文档的元素. 然而一个XSL样式表也可以嵌入在其它文档内容之中.内嵌的方式可能有两种:XSL样式表可以原文嵌入在一个非XML文档中或者xsl:stylesheet不作为文档元素出现在一个XML文档中.在第二种情况增加了出现内嵌样式,即自己规定样式的文档的可能. XSL还没有为之定义相应的机制.这是由于可以采用把样式表结合文档的通用方式来实现,只要满足:

1. 该方式允许一部分内容可以规定为样式表,例如使用有片段标识符URI

2. 该方式本身能被嵌入在文档中, 比如作为一个处理指令.定义这样的方式不在XSL的范围之内.

下例表明了怎样用xml:stylesheet处理指令将样式表和文档结合来实现内嵌样式. 其中的URI在片段标识符中使用了一个Xpointer来确定xsl:stylesheet元素的位置.

<?xml version="1.0"?>

<?xml:stylesheet type="text/xsl" href="#id(style1)"?>

<!DOCTYPE doc SYSTEM "doc.dtd">

<doc>

<head>

<xsl:stylesheet xmlns:xsl="" id="style1">

<xsl:import href="doc.xsl"/>

<xsl:template match="id(foo)">

<fo:block font-weight="bold"><xsl:process-children/></fo:block>

</xsl:template>

</xsl:stylesheet>

</head>

<body>

<para id="foo">

...

</para>

</body>

</doc>

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

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

<style type="text/css">

#foo {

    background: #f00

    width: 200px

    height: 200px

}

.bar {

    float: left

    clear: both

    padding: 20px

}

div {

    border: 10px solid #f00

}

</style> <script type="text/javascript">

var rules = {}

var ss = document.styleSheets

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

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

        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 输出的话会显示

rules = {

    #foo: "width: 200pxheight: 200px",

    .bar: "float: leftclear: both, padding: 20px",

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

}

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

// 设置 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 解析器。

CSS是Cascading Style Sheet 的缩写,译作「层叠样式表单」,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

css文件格式用HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言表示。

有三种方法可以在站点网页上使用CSS:

1、外联式Linking(也叫外部样式):将网页链接到外部样式表。

2、嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。

3、内联式Inline(也叫行内样式):应用内嵌样式到各个网页元素。