currentStyle以及getComputeStyle方法返回对象键值对实例页面

回到相关文章 »

代码:

CSS代码:
.button {
    height: 2em;
    border: 0;
    border-radius: .2em;
    background-color: #34538b;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}
                
HTML代码:
<input type="button" id="button" class="button" value="点击我,显示我" />
<p id="detail"></p>
                
JS代码:
var oButton = document.getElementById("button"),
    oDetail = document.getElementById("detail");

if (oButton && oDetail) {
    oButton.onclick = function() {
        var oStyle = this.currentStyle? this.currentStyle : window.getComputedStyle(this, false);
        
        var key, html = '本按钮CSS属性名和属性值依次为('+ !!this.currentStyle +'):
'; if (typeof oStyle === "object") { for (key in oStyle) { if (/^[a-z]/i.test(key) && oStyle[key]) { html = html + '' + key + ":" + oStyle[key] + ''; } } } else { html += '无法获取CSS样式!'; } oDetail.innerHTML = html; }; }

效果: