How to Add a CSS Class to a Raphael Object

How do I apply CSS styles to Raphael.js objects using jQuery?

I am not exactly sure what you code is doing, but if you want to get a jQuery object out of a Raphael object then do this:

var $jQueryObject = $(raphaelObject.node);

From there you can use jQuery to add a class:

$jQueryObject.addClass('highlight');

Raphael.js How to use CSS file with Raphael.js ?

There seem some differences that doesn't make it possible to apply external css to raphäel text. I recommend you use http://glazman.org/JSCSSP/ to read and parse your external css and apply the rules to your text. A bit more complicated but acceptable.

I also tested with Raphäel 2.0 and it doesn't work. Anyway - I recommend trying out the new library. It has some awesome additions: https://github.com/DmitryBaranovskiy/raphael/tree/2.0

Hope that helps.

set an id at Raphaeljs set

Maybe you can use Raphael data() function to assign any data to your element/set.

Example:

// you can keep global var for your id and increment it within your code
var id = 0;

var p = Raphael(100, 100, 500, 500),
    r = p.rect(150, 150, 80, 40, 5).attr({fill: 'red'}),
    c = p.circle(200, 200, 70).attr({fill: 'blue'});

var set = p.set(r,c).data("id", id);
id++;

// then in your click event to get the id you can do
var whichSet = this.data("id");

// data("id") will return you the global id variable

Good Luck

Change a CSS style of Raphael text with javascript

In javascript, use element.style.property = 'new-style'; to edit styles of an element.

var text = paper.text(10,10,'abc');
text.node.style.fontStyle = 'italic';

Querying class on Raphael object

Classes in SVG aren't quite the same as classes in everything else - and in Raphael, which deals with SVG and IE's VML, things get even more hairy.

First of all, they're on the page's DOM element (Raphael's output) not in the Raphael JS object itself. You'd use Raphael's .node to get the actual DOM path (e.g. with jQuery, $(squares[0].node).someJqueryFunction();) but this sort of thing is best avoided where possible for the above reasons. This related question has answers with more info.

If you want to use classes to store data (e.g. like using 'active', 'inactive' classes as switches), you're best off using Raphael's .data function which apparently is for storing arbitrary values. This related question has answers with more info.

Raphael js how to include multiple Icons per Site? with class instead of ID

You need to put your elements in an array and then loop over it:

var elements = document.querySelectorAll('.paper');
for (i=0; i<elements.length; i++) {
    paper = Raphael(elements[i], 50, 50)
    paper.path(bubble).attr({"fill": "#333"})
}

Or the jQuery version to make it compatible with IE 6 & 7

$('.paper').each(function(i){
        paper = Raphael($(this)[0], 50, 50)
        paper.path(bubble).attr({"fill": "#333"})
})

You can find a demo here:
http://jsfiddle.net/CHEP9/