Are you unable to capture div's style.display value lwc?

952 Asked by KrishnaDwivedi in Salesforce , Asked on Aug 16, 2021

I'm trying to capture the display css property value for an element. However, unless I set style.display value in js it does HTML:

CSS:

.dropdown{ position: absolute; display: none; background: white; }

JS: Below JS method is be called from one of the input boxes in html:

updateDropDownStyle(){ console.log('display : ' ,this.template.querySelector('.dropdown').style.display); }

However, the console prints nothing at all. However, if in the same method I set the element.style.display value as none and then try to console the above - it prints none. What's the issue here?

Answered by shivani Chavan

Style.display is expected. The classes do not impose their values on the style attribute of the DOM element. However, if you want to know the style, use getComputedStyle instead:

let style = window.getComputedStyle(this.template.querySelector('.dropdown')); console.log(style.display); // should output "none"

Are you unable to capture div's style.display value lwc?

Your Answer