代码之家 › 专栏 › 技术社区 › Muhammad Amir

在Firefox中querySelector带有属性,而在svg中查找路径时出错

queryselector template-literals custom-data-attribute firefox javascript

Muhammad Amir · 技术社区 · 1 年前

我的代码在Chrome中运行良好,但在Firefox中运行不好。

当我使用具有属性Firefox的querySelector搜索路径元素时,会出现找不到路径的错误。

defs.appendChild(svgGradient);
const path = this.#svg.querySelector(`[ElementName="${this.#name}"]`);
path.setAttribute("fill", `url(#${gradientId})`);

当我搜索id为的路径时,我能够找到路径。所以我怀疑Firefox中带有属性标记的查询不支持,或者我犯了一个错误,有人能纠正我吗?

下面是我得到的错误

Uncaught TypeError: path is null
    fillGradient texture.js:144
    Texture texture.js:60
    emit events.js:153
    setListeners gradient.js:207
texture.js:144

this.#svg 包含svg标记和 #name 是所选零件的标识符。

1 回复 | 直到 1 年前

Phil 1 年前

运行一个快速测试,我发现Chrome和Firefox都将属性解释为小写 elementname .

console.log(document.querySelector('svg').innerHTML);

<svg><path ElementName="foo" /></svg>

虽然Chrome可以在任何情况下查询元素,但Firefox需要严格匹配

const svg = document.querySelector('svg');
['ElementName', 'elementname', 'ElEmEnTnAmE'].forEach((attr) => {
  console.log(attr, svg.querySelector(`[${attr}]`) !== null);
});

<svg>&书信电报;path ElementName=“foo”/></svg>

在Chrome中,这些都是 true 但Firefox只匹配 elementname .

我建议将您的自定义属性规范化为小写/kebab大小写,例如

<path element-name="foo" />

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前