How to get the attribute data of an element

Question

I am using a chart from Raphael.js and I really have a very little experience with javascript and JQuery that's why I would like to ask you guys, so I'll go straight to the point.

I have some problems regarding the fill data. I simply wanted to get all the fill data (in this example there are two text tags so I wanted to get two fill="#ff0000" and fill="#00e0ff"

<text style="font: 20px "Arial"; opacity: 1; text-anchor: middle;" x="555.0919781452639" y="222.43750078648324" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#ff0000" opacity="1" font-size="20px">
   <tspan dy="7.000000786483241">Ruby</tspan>
</text>

<text style="font: 20px "Arial"; opacity: 1; text-anchor: middle;" x="604.746975531892" y="434.94193863997384" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#00e0ff" opacity="0" font-size="20px">
   <tspan dy="7.000532389973841">PHP</tspan>
</text>

anyway i created a jsfiddle account for it i really still don't have an idea can you guys help me out? http://jsfiddle.net/psyreaper3/rXXem/9/

Answer 1

Try put this code in your callback function :

$('text').each(function(){
    alert($(this).attr('fill'));
});

Answer 2

A somewhat ugly looking but functional solution would be:

$($('text')[0]).attr('fill'); (Which would give you the first text's fill attribute) and
$($('text')[1]).attr('fill'); (Which would give you the second).

You would ideally use an id's on these elements to make it easy for you to get a particular text elements attribute.

<text id="first" fill="blah"></text> and then you can do $('#first').attr('fill');

Answer 3

You can get fill property this way.

$('text').each(function(){
   alert($(this).prop('fill'));
})

Answer 4

Updated Fiddle

You can get fill attribute by:

$(this).attr('fill');

and can update it by using:

$(this).attr('fill','#ffee00');