Get class name of an object

Question

I want to get the class name of an SVG element. I have the following example, but do not get its name:

class_obj = document.getElementbyId("id").className; 
console.log(class_obj);

jsfiddle example: http://jsfiddle.net/twsthyds/34/

Answer 1

Come on.

First, let’s change the way you’re getting the class, for this:

 class_obj = document.getElementById(ddData.element.id).className.baseVal;
    console.log(class_obj);

You are using the string "id" and that’s not the id you want. That way we’re passing the image ID to capture the element. Once that’s done, just get the class of it.

Or we can use the .getattribute("class") to get the element class. This would be your code:

document.getElementById(ddData.element.id).getAttribute("class");
    console.log(class_obj);

Look at an example working:

var svg = document.querySelector('svg');
		
	var shape = document.createElementNS("http://www.w3.org/2000/svg", "image");

	svg.appendChild(shape);
	svg.addEventListener('mousedown', mousedown);
	
	var ddData = {
		element: null,
		initialX: 0,
		initialY: 0,
		originalX: 0,
		originalY: 0,
		finalX: 0,
		finalY: 0,
		contadorElementos: 1,
		movidos: {},
		index: 0
	};

	//start move	
	function mousedown(e) {
			e.preventDefault();
			var evt = e || window.event;
			ddData.element = evt.target || evt.srcElement;
			if (!ddData.element || ddData.element.tagName == 'svg' || ddData.movidos[ddData.element.id]) return ddData.element = null;
			ddData.element.parentNode.appendChild(ddData.element.cloneNode(true));
			
			//img1
			if (ddData.element.id == "img1"){
				ddData.element.id = 1;
			}
			//img2
			if (ddData.element.id == "img1"){
				ddData.element.id = 2;
			}
			ddData.initialX = evt.clientX;
			ddData.initialY = evt.clientY;
			ddData.originalX = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName != 'circle' ? 'x' : 'cx'));
			ddData.originalY = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName != 'circle' ? 'y' : "cy"));
			var type = ddData.element.getAttribute('data-type');
      var arrTmp = document.querySelectorAll('[data-type="'+type+'"]');
      
      if(arrTmp.length>3){
        var el = arrTmp[0];
        el.parentNode.removeChild( el );
      }
	};
	
	
	var position_souris_x = [];
	var position_souris_y = [];
	var index_objet = []; 
	

					
	svg.onmousemove = function (e) {
		e.preventDefault();
		var evt = e || window.event;
		var el = ddData.element;
		if (el) {
			var posX = ddData.originalX + evt.clientX - ddData.initialX;
			var posY = ddData.originalY + evt.clientY - ddData.initialY;
			
			if (el.tagName != 'circle') {
				el.setAttributeNS(null, "x", posX);
				el.setAttributeNS(null, "y", posY);
			}
			ddData.finalX = posX;
			ddData.finalY = posY;
			
		}
	}
	
	var nombre_image;
	x_sonde = [];
	y_sonde = [];
	x_compteur = [];
	y_compteur = [];
	
	//stops drag movement
	svg.onmouseup = function (e) {
		e.preventDefault();
		var evt = e || window.event;
				
		var id = ddData.element && ddData.element.id;
		if (id && !ddData.movidos[id]) ddData.movidos[id] = {
			x: ddData.finalX,
			y: ddData.finalY
		};
		
        //console.log("ID:"+index_objet);
		console.log("ID:"+ddData.element.id);
		
		
		position_souris_x.push(ddData.finalX);
		
		position_souris_y.push(ddData.finalY);		
				
		console.log("x: "+position_souris_x + " y: " + position_souris_y);
		
		nombre_image = position_souris_x.length;
		   
   class_obj = document.getElementById(ddData.element.id).className.baseVal;
   	console.log('className: ' + class_obj);
    
       class_obj = document.getElementById(ddData.element.id).getAttribute("class");
    	console.log('getAttribute: ' + class_obj);
    
		ddData.element = null;
	}

    .img{cursor:move;}

.img2{cursor:no-drop;}

  <svg width="90%" height="500px">
    <image data-type="img1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/favicon.png" id="1" x="0" y="0" height="20" width="20" class="img1"></image>
    <image data-type="img2" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/favicon1.png" id="img2" x="30" y="0" height="20" width="20" class="img2"></image>
<image></image><image data-type="img1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/favicon.png" id="img1" x="0" y="0" height="20" width="20" class="img1"></image></svg>

Your example edited on Jsfiddle.

Reference: Soen.

Answer 2

If it was right what I understood, taking the class value would be something like this:

var image = document.getElementsByTagName('image');
console.log(image[0].className);
console.log(image[1].className);

<svg width="90%" height=500px>
  <image data-type="img1" xlink:href=/favicon.png id=img1 x=0 y=0 height=20 width=20 class="img1" />
  <image data-type="img2" xlink:href=/favicon1.png id=img2 x=30 y=0 height=20 width=20 class="img2" />
</svg>

In this case an object with the following value is returned:

 SVGAnimatedString { baseVal="img1",  animVal="img1"}

You can use the .baseVal or .animVal to access the value directly.

Answer 3

If you have the ID :

document.getElementById("id").className;

The difference is in getElementByid ["B" capital]

Another way, if you want to access by type:

document.querySelector('svg>image').className;