使用javascript更改svg標記的高度屬性

我想在使用Firefox查看時使用Java腳本更改我的html頁面上所有SVG標記的高度屬性。我首先檢查瀏覽器是否爲FF，然後獲取svg的當前高度，然後添加30。使用javascript更改svg標記的高度屬性

我已經寫不工作的腳本：

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不是一個函數

我「M努力實現：

<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%">

任何幫助最受讚賞。

來源

2015-11-13 user1038814

高度是一個字符串因此，如果高度爲12那麼高+ 30人是1230到回答你的問題，但你需要分解它。什麼是document.getElementsByTagName（'svg'）返回？該列表中的第一項是什麼？等等。 –

正如我在我的回答中證明的那樣，您需要在設置高度屬性時刪除內聯樣式或設置樣式高度以使其工作。 – LGSon

-1

的的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);

來源

2015-11-13 18:57:01

這不起作用，因爲內嵌樣式具有優先權。 – LGSon

這個問題最初只提到身高屬性。這個問題後來被編輯成包含顯示高度屬性和高度樣式的HTML代碼。我閱讀並回答了原來的問題。我的答案適用於原始問題。我沒有注意到這個問題在我閱讀它的時間和我發佈我的答案之間進行了編輯。 –

僅供參考您的答案在第二次編輯後19分鐘（以及我的答案的確切時間），然而，OP會做出他想要的選擇，並允許您用關於內聯優先級的註釋更新您的答案。 – LGSon

返回的高度值是一個字符串，你首先需要改成這樣：

var svgHeight = parseInt(x) + 30;

二，3示例演示了一個內嵌樣式的優先級高於屬性，所以你應該改變，而不是高度屬性（如果兩者都存在於該元素上）。

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>

來源

2015-11-13 18:57:00 LGSon

使用javascript更改svg標記的高度屬性

回答

相關問題