why i can't console.log the opacity of the div element

Question

I can console.log(2), but it didn't work when I want to show the opacity of the 'div'?

let obj = document.getElementById('fade-obj');
let btn = document.getElementById('fade-btn');
btn.addEventListener('click', function() {
    console.log(obj.style.opacity);
    console.log(2);
})       

<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn">click</button>

Answer 1

try this

console.log( window.getComputedStyle(obj).getPropertyValue('opacity');

Answer 2

You have to set opacity to see it

let obj = document.getElementById('fade-obj');
let btn = document.getElementById('fade-btn');
btn.addEventListener('click',function(){
       console.log(obj.style.opacity);
});
     

#fade-obj{
width:300px;
height:300px;
background:#000;
}

<div id="fade-obj" style="opacity:1"></div>
<button id="fade-btn">click</button>

Or use window.getComputedStyle(obj).getPropertyValue('opacity')

let obj = document.getElementById('fade-obj');
let btn = document.getElementById('fade-btn');
btn.addEventListener('click',function(){
       console.log(window.getComputedStyle(obj).getPropertyValue('opacity'));
});

#fade-obj{
width:300px;
height:300px;
background:#000;
}

<div id="fade-obj"></div>
<button id="fade-btn">click</button>

Answer 3

Add some default opacity value in order to check value . say opacity:2

console.log(document.getElementById('fade-obj').style.opacity);

<div id="fade-obj" style="width:30px;height:30px;background:#000;opacity:2"></div>

Answer 4

The problem is that when you don't set the opacity, the browser sets it for you. So the opacity is not from the CSS itself. Rather it is computed. Get value using:

let obj = document.getElementById('fade-obj');
window.getComputedStyle(obj).getPropertyValue('opacity');