Obtain the class name of an object

Navigation
4

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

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

Jsfiddle example: link

    
asked by anonymous 27.01.2016 / 16:22

3 answers

5

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 this is not the id you want. That way we are passing the image ID to capture the element. That done, just get the class itself.

Or we can use .getAttribute ("class") to get the element class. It would look like this: 

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

Look at an example that works: 

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 in JSFiddle.

Reference: SOen.

    
27.01.2016 / 16:42
4

If it was quite what I understood, getting the value of the class would look 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 .baseVal or .animVal to access the value directly.

    
27.01.2016 / 16:38
0

If you have the ID: 

document.getElementById("id").className;

The difference is in the getElement ById ["B" uppercase]

Another medium, if you want to access by type: 

document.querySelector('svg>image').className;
    
27.01.2016 / 16:43
Search Products via API or Web Crawler How to know in JAVA that ResultSet result is empty?