使用Javascript獲取HTML 5圈子的屬性

我有多個使用D3.js添加到svg的html圈子。每個圓圈沒有任何ID或類，看起來當我檢查在瀏覽器中的元素，如：使用Javascript獲取HTML 5圈子的屬性

<circle cx="50" cy="80" r="1" style="fill: rgb(255, 0, 0);"></circle>

我想要得到的cx和cy值轉換爲JavaScript變量。

我想是這樣的：

var v = $('circle').value;

但我如何引用屬性cx和cy？

我試過var x_val = $('circle.cx').value;但這是未定義的。

也試過var x_val = $('circle').data('cx');但這是空的。

來源

2014-11-24 brno792

element.value;獲取普通JavaScript對象的值，而不是jquery對象。

$('circle').data('cx');獲取屬性data-cx=""或與該方法$('circle').data('cx', 'whatever');

預先設置好的一個值的值來獲取cx和cy值，使用：

var x_val = $('circle').attr('cx'); 
var y_val = $('circle').attr('cy');

UPDATE：

迭代成多個圈：

var x_val, y_val; 
$circleArray = $('circle'); //get all circles 

$circleArray.each(function(idx, el){//go through each circle 

    x_val = $(el).attr('cx');//get cx 
    y_val = $(el).attr('cy');//get cy 

    $('#result').append(idx+': '+x_val+'/'+y_val);//here: print the values, but replace this with whatever you need 
});

http://jsfiddle.net/pu2cnLgk/1/

來源

2014-11-24 06:28:13 ylerjen

感謝。雖然我嘗試的時候會變得「不確定」。我有多個圈子，他們都沒有ID或班級。這就是爲什麼我得到'未定義'？我應該如何迭代它們？ – brno792 2014-11-24 06:43:16

不缺乏Id或Class不是問題。你可以在沒有id和class的情況下獲得這個值，因爲$（'circle'）將獲取頁面中的所有元素'circle'。如果您想確定要獲取哪個圈子，請使用班級或ID。我更新了我的答案以適應您的帖子編輯。 .attr（）方法運行良好，請看一下小提琴。 – ylerjen 2014-11-24 06:53:47

我應該提到使用D3.js添加的圓圈。我試過你的解決方案，但我沒有得到任何東西.each（），console.log（）甚至沒有打印任何東西。當我打印circleArray時，我看到[prevObject：x.fn.x.init [1]，上下文：document，selector：「circle」，jquery：「1.10.2」，構造函數：function ...] – brno792 2014-11-24 17:54:00

這很容易做到而不使用JQuery，特別是如果你的圈子有一個id。

<circle id='awesomeCircle' cx="50" cy="80" r="1" style="fill: rgb(255, 0, 0);"></circle>

而上你的JavaScript代碼：

var x = document.getElementById('awesomeCircle').getAttribute('cx'); 
var y = document.getElementById('awesomeCircle').getAttribute('cy');

如果你不願意分配一個ID的元素，你可以使用

var x = document.getElementsByTagName('circle')[0].getAttribute('cx'); 
var y = document.getElementsByTagName('awesomeCircle')[0].getAttribute('cy');

這將影響和瀏覽器的兼容性消極的，但。

來源

2014-11-24 06:36:54

$（'circle'）會給你jQuery對象。因此，

$('circle').value //undefined

由於在jQuery中沒有值變量或方法。

由於有許多圈子，你可以做這樣的

$('circle').each(function(index,elem){ 
 
    
 
    alert("cx :"+elem.getAttribute("cx")+"...cy :"+elem.getAttribute("cy")); //using JavaScript 
 

 
    console.log("cx :"+$(elem).attr("cx")+"...cy :"+$(elem).attr("cy")); // using jQuery 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<circle cy="10" cx="210"></circle> 
 
<circle cy="30" cx="210"></circle> 
 
<circle cy="20" cx="201"></circle> 
 
<circle cy="10" cx="210"></circle>

來源

2014-11-24 06:56:35

使用Javascript獲取HTML 5圈子的屬性

回答

相關問題