If I select a DIV tag in a XHTML file with XSLT, like //*[@id='background'] How do I add a style, like a background color or other CSS styles like borders to the DIV? And if I have a list inside the DIV ID=background, how can I style the list, like removing the bullets? :)
Add a comment
|
1 Answer
This is really easy with XSLT. For instance, your input is:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="background">
<ul style="list-style-type: bullet">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</body>
</html>
You can use the identity transform to copy the input XML as is, and override the nodes of interest:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:x="http://www.w3.org/1999/xhtml"
exclude-result-prefixes="x">
<xsl:output method="xml" indent="yes"/>
<xsl:strip-space elements="*"/>
<xsl:template match="node()|@*">
<xsl:copy>
<xsl:apply-templates select="node()|@*" />
</xsl:copy>
</xsl:template>
<xsl:template match="x:div[@id='background']">
<xsl:copy>
<xsl:attribute name="style">
<xsl:text>border-style:solid;border-width:medium</xsl:text>
</xsl:attribute>
<xsl:apply-templates select="node()|@*"/>
</xsl:copy>
</xsl:template>
<xsl:template match="x:ul[ancestor::*
[name()='div' and @id='background']]/@style">
<xsl:attribute name="style">
<xsl:text>list-style-type: none</xsl:text>
</xsl:attribute>
</xsl:template>
</xsl:stylesheet>
The output will be:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div style="border-style:solid;border-width:medium" id="background">
<ul style="list-style-type: none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</body>
</html>
9 Comments
3D-kreativ
Thanks! Haven't had time to look at the code until now. How do I connect the input XHTML with the XSLT file to produce the output XHTML. Is it like when transforming plain XML to put the XSLT reference in the beginning of the input?
Emiliano Poggi
By this question, I imagine you want apply your transform using the browser built-in processor. Right? Yes should work the same way when transforming plain XML, with the reference to the stylesheet.
3D-kreativ
Yes! But other alternatives are there apart from transforming with browser?
3D-kreativ
Hmmm what does this part of the code do? match="node()|@*"> And what does the COPY do?
Emiliano Poggi
There are many alternatives, depends on what you want to do :). The part of the code you are mentioning is known as Identity rule and you will find a lot of documentation about it (google or here). It copies the input document as is.
|