获得样式属性和外联样式

zoukankan html css js c++ java

获得样式属性和外联样式

function getStyleProperty(obj, property){
    var ele = document.getElementById(obj),
        val = '';
    //console.log(ele.ownerDocument.firstChild.innerHTML);
    if(ele.currentStyle){
        val = ele.currentStyle[property];
    } else if(ele.ownerDocument.defaultView.getComputedStyle) { //找到节点所属的document再找到其所属的window
        val = ele.ownerDocument.defaultView.getComputedStyle(ele, null).getPropertyValue(property);
    }
    alert(val || '没有此属性值');
    //return val || '没有此属性值';
}
//console.log(document.defaultView);
//alert(getStyle('wrap', 'height'));
function getFullStyle(){
    var ss = document.styleSheets[0]; //获得该文档的样式表，数组元素类型是CSSStyleSheet
    var rules = ss.cssRules ? ss.cssRules : ss.rules; //FF是cssRules,IE是rules。rules代表样式表中的规则,类型是CSSRule
    for(var i=0; i<rules.length; i++){
        var rule = rules[i];
        alert(rule.selectorText + '{' + rule.style.cssText.toLowerCase() + '}'); //selectorText css选择器的名称
        //return rule.selectorText + ':{' + rule.style.cssText.toLowerCase() + '}'; //selectorText css选择器的名称
    }
}
//getFullStyle();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style type="text/css"> #test-box{margin-bottom:10px;} .wrap{200px;border:20px solid #ccc;} .wrap2{180px;height:180px;border:10px solid #efefef;} </style> </head> <body> <div id="test-box"> <div class="wrap" id="wrap"> <div class="wrap2">this is test wrap</div> </div> </div> <input type="button" value="获取 width 的属性值" onclick="getStyleProperty('wrap', 'width')" /> <input type="button" value="获取外联全部样式值" onclick="getFullStyle()" /> <xmp> <style type="text/css"> #test-box{margin-bottom:10px;} .wrap{200px;height:200px;border:20px solid #ccc;} .wrap2{180px;height:180px;border:10px solid #efefef;} </style> <div id="box"> <div class="wrap" id="wrap"> <div class="wrap2">this is test wrap</div> </div> </div> </xmp> <script type="text/javascript"> function getStyleProperty(obj, property){ var ele = document.getElementById(obj), val = ''; //console.log(ele.ownerDocument.firstChild.innerHTML); if(ele.currentStyle){ val = ele.currentStyle[property]; } else if(ele.ownerDocument.defaultView.getComputedStyle) { //找到节点所属的document再找到其所属的window val = ele.ownerDocument.defaultView.getComputedStyle(ele, null).getPropertyValue(property); } alert(val || '没有此属性值'); //return val || '没有此属性值'; } //console.log(document.defaultView); //alert(getStyle('wrap', 'height')); function getFullStyle(){ var ss = document.styleSheets[0]; //获得该文档的样式表，数组元素类型是CSSStyleSheet var rules = ss.cssRules ? ss.cssRules : ss.rules; //FF是cssRules,IE是rules。rules代表样式表中的规则,类型是CSSRule for(var i=0; i<rules.length; i++){ var rule = rules[i]; alert(rule.selectorText + '{' + rule.style.cssText.toLowerCase() + '}'); //selectorText css选择器的名称 //return rule.selectorText + ':{' + rule.style.cssText.toLowerCase() + '}'; //selectorText css选择器的名称 } } //getFullStyle(); </script> </body> </html>

查看全文

相关阅读:
Js 作用域链
 JS 上下文模式
 javascript
HTTP概念进阶
 JavaScript运行机制详解
 浅谈循环中setTimeout执行顺序问题
 Js 运行机制 (重点!!)
javascript
jQuery 知识点总结
 Educational Codeforces Round 87 (Rated for Div. 2)

原文地址：https://www.cnblogs.com/jikey/p/2082171.html