Question

好的，所以我使用外部svg文件显示一些svg，其中我有一些样式如下：

    <style type="text/css">
<![CDATA[
    .st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
    .st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
    .st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
    .st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
]]>
</style>

我想使用javascript这样添加一些样式：

    console.log("style innerHTML before :\n" + document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML);
    var styleContent = document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML;
    styleContent = styleContent.slice(0, styleContent.lastIndexOf("}") + 1) + "\n\t\trect:hover {fill:#698B89}\n\t]]>\n";
    document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML = styleContent;
    console.log("style innerHTML after :\n" + document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML);

它在Firefox中工作正常，我的控制台在修改后显示内部HTML：

<![CDATA[
.st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
.st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
.st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
rect:hover {fill:#698B89}
]]>

但是在Chrome中它失败了，控制台显示：

&lt;![CDATA[
.st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
.st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
.st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
rect:hover {fill:#698B89}
]]&gt;

所以我的<和>设置不正确，我改为使用<和>个实体，而这只是Chrome浏览器。

Answer 1

您的问题是由使用方法ECHO OFF SETLOCAL enableextensions enabledelayedexpansion set /p "inputfile=Enter the server list name: " for /f %%z in (%inputfile%) do ( for /f "skip=1 tokens=1,2* delims=," %%a in (%%z.csv) do ( set "inst=%%b" @echo Service Name: %%a @echo !inst! "!inst:\=/!" @echo Description: %%b @echo Install Path: %%c ) ) pause处理DOM节点时各种浏览器之间的差异引起的。在执行任何操作之前检查Element.innerHTML()节点时，这一点很明显。此节点在所有浏览器中包含三个子节点：<style>。类型[text, cdata-section, text]的两个节点只包含text周围的任何空格。

使用方法cdata-section将在FF和IE中保留此DOM结构，方法是将其替换为具有相同DOM子树结构的更新Element.innerHTML()元素。但是，Chrome会将更新后的<style>字符串解析为字符数据，并只创建一个styleContent类型的节点。由于text元素仅允许字符数据内容，因此Chrome似乎也会逃避其中包含的任何标记。因此，您的<style>之后将仅包含Chrome中的一个文本节点，这对于进一步处理没有用处。

我已经设置了Enable Delayed Expansion，展示了更强大的解决方案：

style

这样做，您可以获得// Get style node. var style = document.querySelector("object").contentDocument.querySelector("style"); // Extract CDATA-Section from style's childNodes. var cdata = getCDATA(style.childNodes); // Manipulate CDATA content. var styleContent = cdata.textContent; styleContent += "\n\t\tpath:hover {fill:#698B89;}"; // Update CDATA-section node. cdata.textContent = styleContent; function getCDATA(nodelist) { for (var i=0; i < nodelist.length; i++) { var node = nodelist.item(i); if (node.nodeType == Element.CDATA_SECTION_NODE) { return node; } } }类型节点的引用，使您可以轻松操作其cdata-section。因为您不是强制浏览器使用textContent重建其部分DOM树，所以Element.innerHTML() DOM子树的结构将在浏览器中保持不变，从而提供一致的结果。

innerHTML仅在Chrome中编码

1 个答案: