Why did not element.getAttribute() work?

[eaglehopes]

Hi, I am trying to get the element's width and height by using element.getAttribute() function, but not worked. Not worked function was : 

 

function loading() {
 svg = document.getElementById("dotBorder"); 
 errorLine = document.getElementById("error");
 innerDiv =  document.getElementById("innerDiv");
 parentOfSvg = document.getElementById("parentOfSVG");
  
  console.log(" svg : " + svg + " errorLine :"+errorLine+ " innerDiv :"+innerDiv+ " parentOfSvg:"+parentOfSvg);
  
 width = parentOfSvg.getAttribute('width') ;
 height = parentOfSvg.getAttribute('height');
  console.log(" w1 : " + width + ", h1 :" + height );
}

since error saying that "parentOfSvg" element is "undefined",  width and height variables gave error. My code was available in https://codepen.io/eaglehopes/pen/MWZOEgg . Can anybody says that what is wrong? Thanks.

Edited September 29, 2023 by eaglehopes
add explanation for error.

[requinix]

1. Are you sure you don't mean to get the svg's width and height? Since that element actually has those two specified as attributes?
2. parentOfSVG is the same dimensions at its child.
3. getAttribute gets attributes defined on the element. You didn't define a width or height on the parent.
4. I think you want either clientWidth or offsetWidth.

[eaglehopes]

Thanks requinix,

1. What I am actually trying to do is that creating a custom div element having a border with my drawn SVG. I will try to get svg's width and height but not worked too?

2. parentOfSVG has the same dimension, I put it as a wrapper, but now worked like mine

3. If so, I could get svg's width and height, but I could not?

4. there are very good illustrations in the link ! I am looking them !

[eaglehopes]

Actually, I noticed that, when I explicitly define width and height attributes in HTML (not from CSS), they worked. It looks like a "hard-coded" vs. "soft coded" or something like that... I do not know : what worked was :

<svg id="dotBorder" width="300" height="300" class="borderedSVG" > 
...
</svg>

When I define width and height in CSS by var(--width) or var(--height), javascript does not understood it. Why?

[requinix]

6 hours ago, eaglehopes said:

When I define width and height in CSS by var(--width) or var(--height), javascript does not understood it. Why?

Because you tried to "get attribute" and CSS is not attributes.

[eaglehopes]

15 hours ago, requinix said:

Because you tried to "get attribute" and CSS is not attributes.

Ok requinix, then can I say that CSS could not change any of the attributes of any objects in HTML?

If so, then I put some width for div element in CSS, then I can not get it as attribute. But how can I see it has some width then? Is CSS cause some kind of mask? How is this possible, does browser cause this?

I think I found to how to get the "CSS attribute" of element from javascript code : using getComputedStyle() function!

So I learned that:

1. I can not change any HTML attribute directly by using CSS,

2. to get changed CSS attribute of HTML element in javascript, I should use  getComputedStyle()  function !

Thanks requinix for guide.

 

[Barand]

FYI - jquery makes it easier...

let w1 = $("#dotBorder").css("width"))

 

[eaglehopes]

I wanted to record the code below that worked to extract CSS attributes :

1. In CSS file 

get

:root {
  --width: 300px;
  --height: 300px;
  --innerPadding : 3px;
  --radius : 4px;
  --borderThickness : 1px;
  --diameter : calc(2*(var(--radius) +var(--borderThickness)) );
}
#innerDiv {
	width : var(--width);
	height : var(--height);
	...
}

2. in javascript file :

innerDiv =  document.getElementById("innerDiv");
const elementStyleValues = getComputedStyle(innerDiv); // to extract CSS attributes 
innerDiv.style.width=( (width  - 2*diameter) - 2*innerDiv.style.borderWidth.replace("px","") )+"px";
innerDiv.style.height=( (height  - 2*diameter) - 2*innerDiv.style.borderWidth.replace("px","") )+"px" ;
// get and write CSS attribute height of innerDiv element :
errorLine.innerHTML= elementStyleValues.getPropertyValue('height'); // worked!

So, using CSS attributes, kind of automation for dimensioning and sizing can be done by using javascript's  getComputedStyle()  function.

[requinix]

Congratulations: you've made this so much more complicated than it needed to be!

https://stackoverflow.com/a/21064102