Question

我正在尝试使用Firefox查看时使用Java Script更改html页面上所有SVG标记的height属性。我首先检查浏览器是否为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);
}

我收到以下错误： TypeError：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>

Answer 2

getAttribute（）方法将返回一个字符串。您需要将字符串转换为数字。 Robert Longson指出了这一点。

调用setAttribute（）方法的行缺少索引器。您的代码在集合上调用setAttribute（）而不是在单个元素上调用。

一种解决方案是改变您的代码......

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

为...

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

使用javascript更改svg标记的height属性

2 个答案: