Question

对于这样的事情：http://was-sg.wascdn.net/wp-content/uploads/2014/02/Slide046.png

表示是否像：

<continent value="Internet Users In Europe">
    <country name="United Kingdom">
        <users>55 Million</users>
    </country>
    <country name="Ireland">
        <users>3.7 Million</users>
    </country>
    <country name="Norway">
        <users>4.5 Million</users>
    </country>
    <country name="Germany">
        <users>68 Million</users>
    </country>
</continent>

然后如何将其嵌入到html文件中？

Answer 1

以下是使用直接嵌入HTML页面的XML的示例：

<html> ...
  <body> ...
    <div id="xml-data">
        <continent value="Internet Users In Europe">
            <country name="United Kingdom">
                <users>55 Million</users>
            </country>
            <country name="Ireland">
                <users>3.7 Million</users>
            </country>
            <country name="Norway">
                <users>4.5 Million</users>
            </country>
            <country name="Germany">
                <users>68 Million</users>
            </country>
        </continent>
    </div>
    ...
</body>

您可以使用CSS设置样式（但请注意，许多较新的CSS技巧可能不适用于任意XML标记 - 为了安全起见，坚持使用CSS2并在多个浏览器中进行测试）：

continent {
    display: block;
    border: solid black 1px;
    width: 250px;
}
country {
    display: block;
}
country {
    display: block;
    border: solid black 1px;
    padding: 2px;
    text-align: center;
}

country:before {
    display: block;
    content: attr(name);
}

您可以使用脚本来更改其结构，添加和删除元素和属性，响应事件等。这是一个简单的示例：

var countries = document.getElementsByTagName("country");
for(i = 0; i < countries.length; i++) {
    var attr = countries[i].getAttribute('name');
    countries[i].setAttribute('name', attr.toUpperCase());
}

您可以在此JSFiddle中试验此示例，并查看将上述CSS和脚本应用于嵌入式XML的结果。

要将XML中的数据用于您在示例中链接的图像，您可能会隐藏XML（使div不显示）并使用它来提取您可以使用的位置和样式的数据CSS覆盖图像。您还可以使用XML中的数据作为嵌入式SVG图像的源，并使用脚本将文本复制到SVG对象。

了解XML格式

1 个答案: