In JavaScript, Is assigning a class name to a regular element and a namespace element different?

Question

function foo(){
  var svg = document.querySelector(".crusher");
  let polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
  polygon.className = "polygon01";
  svg.appendChild(polygon);
}

function foo01(){
  let actualPolygon = document.querySelector(".polygon01");
  actualPolygon.style = "fill:red";
}

When I try to select the class name, and change the fill color, i'm receiving a cannot access style of null value, so the class name is not being assigned the way I would like it to. Any help would be awesome.

Isa · Accepted Answer · 2020-06-12 01:14:14Z

1

Try use setAttribute

function foo(){
  var svg = document.querySelector(".crusher");
  let polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
  polygon.setAttribute('class', 'polygon01');
  svg.appendChild(polygon);
}

function foo01(){
  let actualPolygon = document.querySelector(".polygon01");
  actualPolygon.style = "fill:red";
}

foo()
foo01();

answered Jun 12, 2020 at 1:14

Isa

4281 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lewis · Accepted Answer · 2020-06-12 01:16:30Z

0

Taking a look at the spec for the SVG namespace you provided, it says that className is deprecated and to use classList.

// create polygon and add class
let polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
polygon.classList.add("polygon01");

// append to element
document.querySelector(".crusher").appendChild(polygon);

// reference polygon with querySelector and add fill:red style
let actualPolygon = document.querySelector(".polygon01");
actualPolygon.style.fill = "red";
console.log(actualPolygon.style.fill);

<div class="crusher">

answered Jun 12, 2020 at 1:16

Lewis

4,6552 gold badges26 silver badges36 bronze badges

3 Comments

user13731190 Over a year ago

Thank you, What made you think to check that update for SVG? Just wondering so I can try to self correct in the future.

Lewis Over a year ago

Between us, that's the first time I've ever looked at a spec, which I only did because createElementNS(...).className looked weird compared to what we'd expect (an empty string, compare with document.createElement('a').className which returns ""). The polygon className property actually spits out a weird-looking object that looks like SVGAnimatedString {baseVal: "", animVal: ""}, and I don't actually know what's happening there. It was enough to make me see if they broke className somehow and sure enough, it's deprecated for this namespace.

Lewis Over a year ago

It looks like an interface for changing classes on the fly during animations or something: developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedString. Feel free to explore it a bit if you're curious.

Collectives™ on Stack Overflow

In JavaScript, Is assigning a class name to a regular element and a namespace element different?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related