I'm a beginner in CSS and JavaScript and I've been searching through various sources for an answer to my question without any luck.
My goal is to pre-set the sizes of all sections using CSS and then utilize these sections in JavaScript. However, I've noticed that the .width and .height attributes used in JavaScript do not reflect the hardcoded sizes specified in the .css file, but rather the size of the element at the current point in which the script is executed.
A part of my HTML code looks like this:
<div id="raw">
<p id="add">Add a new data value</p>
<p id="remove">Remove a data value</p>
<script src = "javascripts/dynamic_bars.js"></script>
</div>
The corresponding CSS section appears as follows:
#raw{ position: relative; float: left; width: 100% ; min-height: 80% ;}
In my dynamic_bars.js file, I attempted to retrieve the width of the element with ID "raw":
var h = document.getElementById('raw').scrollHeight;
console.log(h);
var w = ($(this).width() * 0.8);
var h = ($(this).height() / 3) ;
While scrollHeight only captures the height of the "add" and "remove" text elements, the $(this).height() method functions correctly but returns the height of the entire screen rather than the "raw" element.
Upon inspecting the DOM, I confirmed that the height of my "raw" section is indeed set to 80% of its parent. However, when the JavaScript runs (generating SVG elements within the "raw" section), it seems to be constrained to the size of previously added text elements.
Is there a way to access the min-height attribute defined in CSS from JavaScript?