好的,所以我使用外部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中它失败了,控制台显示:
<![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浏览器。
答案 0 :(得分:3)
您的问题是由使用方法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子树的结构将在浏览器中保持不变,从而提供一致的结果。