如何使用 XML 设置样式答案

【问题标题】：How do I style with XML如何使用 XML 设置样式
【发布时间】：2019-05-31 22:55:22
【问题描述】：

XML 数据

<moblies>
 <moblie>
    <title>IPhone X</title>
    <image>iphoneX.png</image>
    <price>999</price>
 </moblie>
</moblies>

CSS

moblies {
  font-size:80%;
  margin:0.5em;
  font-family: Verdana;
  display:block
}

moblie {
  display:block;
  border: 1px solid silver;
  margin:0.5em;
  padding:0.5em;
  background-color:whitesmoke;
}

title, price {
  display:block;
  font-style: italic;
}

脚本

$(document).ready(function(){
    $.ajax({
      type: "GET",
      url: "xml/data.xml",
      dataType: "xml",
      success: xmlParser
    });
  });

  function xmlParser(xml) {
      $('#load').fadeOut();
      $(xml).find("moblie").each(function()
      {
          $("#container").append('<div class="moblie"><img src="images/' +
            $(this).find("image").text() + '" width="200" height="300" alt ="' +
            $(this).find("title").text() + '" /><br/><div class="title">' +
              $(this).find("title").text() + '<br/>$' +
              $(this).find("price").text() + '</div></div>');
          $(".moblie").fadeIn(1000);
      });
  }

我正在尝试设置要导入的 XML 数据的样式，但似乎无法了解您实际如何做到这一点。上面我提供了我的 XML、CSS 和我用来显示数据的脚本，如果有人知道我哪里出错了，或者任何研究链接将不胜感激。

【问题讨论】：

XSLT
如果您使用 Javascript 解析 XML 并创建具有 class 属性的 HTML div 元素，为什么 moblie 元素样式的 CSS 规则会有任何影响？如果您希望 CSS 应用于您创建的 HTML，您需要 .moblie 或 .title 作为相应的 CSS 选择器。
我试过了，xml数据没有变化，这是正文中的内容，不确定我的div有什么问题吗？
您是否使用浏览器的开发者工具并检查错误控制台是否有任何脚本或网络错误？您是否知道 StackOverflow 允许您在问题中嵌入可执行的 HTML/CSS/Javascript sn-ps 以便我们轻松重现问题？无需将您的代码放入注释中。

标签： javascript html css xml xslt

【解决方案1】：

您有一个 XML 文档和一个用于样式的 CSS。

所以问题是您的输出格式是什么？我只能猜测它应该是 HTML - 但其他像 PDF 也是可能的（需要XML-FO）。

因此，您尝试的不是设置 XML 的样式，而是将 XML 转换为 HTML 并将样式表应用于此输出 (HTML)。

最好的方法是使用XSLT，因为这种“语言”有额外的设计来转换xml。但也可以通过像你这样的代码来实现。

另一种解决方案可能是使用正则表达式替换...

但最后但并非最不重要的一点是，我认为您忘记在结果中包含样式表，例如：

<link rel="stylesheet" type="text/css" media="all" href="layout.css" />

【讨论】：