js为什么不能将css属性赋值给变量？

Question

在修改元素的display属性值时，因为要拿display的属性值作判断条件，所以就想图个方便，于是想把元素的display属性赋值给变量，然后回到网页中触发事件却没有任何效果，试着用alert变量，结果为空！
直接使用oTest.style.display,当然没问题，将oTest.style赋值给变量也没问题，唯独下面这样不行，求解！

var oTest = document.querySelector('.test');
var oBtn = document.querySelector('.btn');
oBtn.onclick = function(){
  var a = oTest.style.display;
  console.log(a);  //输出空
 a === 'block' ? a = 'none' : a = 'block'; 
};

Answer 1

jQ用爽了，忘记那些原生写法了嘛~

  oBtn.onclick = function() {
    // var a = oTest.style.display;
    var a =document.defaultView.getComputedStyle(oTest, null).display; 
    console.log(a); 
  };

这个我在红皮书里见得，在这再补个资料，张鑫旭的

Answer 2

貌似js获取样式值有一个坑，好像是不能直接获取到css样式文件内的，只能获取内联样式值，你可以这样
：
var attrStyle = function(elem, attr) { //获取样式

                if(elem.attr) {
                    return elem.style[attr];
                } else if(elem.currentStyle) {
                    return elem.currentStyle[attr];
                } else if(document.defaultView && document.defaultView.getComputedStyle) {
                    attr = attr.replace(/([A-Z])/g, '-$1').toLowerCase();
                    return document.defaultView.getComputedStyle(elem, null).getPropertyValue(attr);
                } else {
                    return null;
                }
            }
            

var height = parseInt(attrStyle(elem, "height")); //获取元素height属性值

Answer 3

其实不是空啦，是空字符串 "" 你不要去和block比较，直接和""比较就行了。

Answer 4

这个是引用和值的区别 Σ( ° △ °|||)︴

Answer 5

DOM.style设置的是内联属性，一般用CSS的话，display就应该是"",所以初始化的时候可以先设置为block,或者HTML写上style='display:block;';