Изменение атрибута высоты svg-тега с помощью javascript

Question

Я пытаюсь изменить атрибут высоты всех тегов SVG на моей странице html с помощью Java Script при просмотре с помощью Firefox. Сначала я проверяю, является ли браузер 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

Метод GetAttribute() возвращает строку. Вам нужно преобразовать строку в число. Об этом говорил Роберт Лонгсон.

Строка вызова метода 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); 

Answer 2

В качестве значения высоты возвращенного является строкой, в первую очередь необходимо изменить это:

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>