javascript - 使用javascript更改svg标签的高度属性

Question

当使用 Firefox 查看时，我试图使用 Java 脚本更改 html 页面上所有 SVG 标签的高度属性。我首先检查浏览器是否为FF，然后获取svg的当前高度，然后添加30。

我写的脚本不起作用:

var FIREFOX = /Firefox/i.test(navigator.userAgent);

if (FIREFOX) {
  var x = document.getElementsByTagName('svg')[0].getAttribute('height'); 
  var svgHeight = x + 30;
  document.getElementsByTagName('svg').setAttribute('height', svgHeight);
}

我收到以下错误:类型错误: document.getElementsByTagName(...).getAttribute 不是函数

我想要实现的目标:

<svg style="width: 100%; height: 300;" class="ct-chart-bar" height="300" width="100%">

至

<svg style="width: 100%; height: 300;" class="ct-chart-bar" height="330" width="100%">

非常感谢任何帮助。

Answer 1

由于返回的高度值是一个字符串，所以首先需要更改为:

var svgHeight = parseInt(x) + 30;

其次，第 3 个示例显示内联样式优先于该属性，因此如果元素上同时存在这两个属性，您应该更改该属性而不是 height 属性。

var x = document.getElementsByTagName('svg')[0].style.height; 
var svgHeight = parseInt(x) + 30;
document.getElementsByTagName('svg')[0].style.height = svgHeight + 'px';


/* This doesn't work as the inline style has precedence */
var x = document.getElementsByTagName('svg')[1].getAttribute('height'); 
var svgHeight = parseInt(x) + 30;
document.getElementsByTagName('svg')[1].setAttribute('height', svgHeight);


var x = document.getElementsByTagName('svg')[2].getAttribute('height'); 
var svgHeight = parseInt(x) + 30;
document.getElementsByTagName('svg')[2].setAttribute('height', svgHeight);

<svg style="width: 30%; height: 100px;" height="100" width="30%">
  <rect x="0" y="0" height="100%" width="100%" style="fill:green"></rect>
</svg>

<svg style="width: 30%; height: 100px;" height="100" width="30%">
  <rect x="0" y="0" height="100%" width="100%" style="fill:red"></rect>
</svg>

<svg height="100" width="30%">
  <rect x="0" y="0" height="100%" width="100%" style="fill:blue"></rect>
</svg>