根据 xml 文件值更改元素 css 类答案

【问题标题】：Change element css class based on xml file value根据 xml 文件值更改元素 css 类
【发布时间】：2020-06-18 15:43:35
【问题描述】：

这还有可能吗？以前从未尝试过或尝试过这样的事情，我不知道从哪里开始。

我有一个本地文件，当按下手动按钮时，它会更新一个更改的 xml 文件

<status>live<\status> 
to 
<status>killed<\status>

我还有一个 HTML 页面，其中包含 iframe 为 IP 摄像机提取实时摄像机源。我想隐藏 iframe 并在状态为“已终止”时显示图形。

有谁知道这是否可行以及我从哪里开始？不知何故定期检查 xml 文件或不知何故知道它已被更新。

然后以某种方式应用类或引入诸如 div 之类的元素来屏蔽 iframe。

【问题讨论】：

您能否提供更多的 html 代码，您是否将值注入到您的 html 文件中的任何位置？或者它只在 xml 上更新，您是使用 ajax 调用该 xml 从 xml 中提取数据吗？我相信更多的解释会有所帮助

标签： javascript ajax xml xmlhttprequest

【解决方案1】：

是的，您可以在 JavaScript 中使用 XML，就像使用 HTML 一样。但是，如果没有服务器端组件，就不可能将 xml 文档写回文件系统。您可以随时为用户下载它，但不能直接写入文件系统。

这是一个使用 JS 更新 XML 文档的简单示例。我在示例中将 xml 字符串和将字符串解析为 xml doc 的逻辑都放入了，因为我不确定您的设置是什么。

const xmlString = `
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>
`;
const xmlDoc = new DOMParser().parseFromString(xmlString, 'text/xml');

document.getElementById('btn').addEventListener('click', e => {
  const to = xmlDoc.querySelector('note to');
  to.innerHTML = 'Someone New';
  console.log('The TO field is now ', xmlDoc.querySelector('note to').innerHTML);
  
  // Set HTML Element from XML
  const h1 = document.getElementById('fromXml');
  h1.innerText = xmlDoc.querySelector('note heading').innerHTML;
});

<button id="btn">Set To</button>
<h1 id="fromXml"></h1>

【讨论】：

有可能走另一条路吗？并从 xml 文件中读取并根据 xml 值向 HTML 页面引入一个元素？所以基本上xml文件中的一个值从yes变为no，并基于该显示或隐藏HTML文件中的元素
是的，这是可能的。您只需创建元素并将其附加到您的容器中。请投票/标记为答案
对不起，这对我来说是陌生的，那会是什么样子？
我更新了 sn-p 以演示如何从 xml 文件中的值设置 html 元素。请标记为答案/赞成