As I work on a script, I encounter an issue where the style of a div should change when it becomes larger due to resizing.
Even though I have come up with a solution for this problem, there are still some inconsistencies. Sometimes the width is reported as 0 and I can't seem to understand why. Additionally, adjusting the criteria for when the div should change does not always produce the desired outcome. Furthermore, reverting back to the original state after a change does not always work as expected.
window.addEventListener('resize', height);
function height() {
var height = document.getElementById('noline').offsetHeight;
document.getElementById("noline").innerHTML = height;
if (height <= 20) {
document.getElementById('noline').setAttribute('id', 'line1');
} else {
document.getElementById('line1').setAttribute('id', 'noline');
}
}#noline
{
border: solid 5px blue;
}
#line1
{
border: solid 5px black;
}<div id="noline">
</div>Despite searching on stackoverflow, I couldn't find a straightforward answer that addresses my confusion. Being relatively new to javascript, understanding what went wrong is challenging for me. Any guidance on identifying and rectifying the issue would be greatly appreciated.
Thank you!