javascript - How can I detect overwritten css properties? -

-

i can css properties element document.stylesheets of not active because properties overwritten. in firebug (chrome developer tools has feature), if there's overwritten css property, see that: enter image description here

the way can think of comparing active css property element (in jquery $(element).css(property)) , defined css property in document.stylesheets it's not reliable way it. suggestion?

in webkit, can use getmatchedcssrules achieve want. returns css rule set in order of inheritance applied browser , is webkit inspector used time ago. gecko based browsers firefox there seems polyfill available here although i've not tested it.

a basic, working solution

the following code available fiddle

because getmatchedcssrules only works inline stylesheets, first have inline linked stylesheets:

function inlinestyles() {     var stylesheets = document.getelementsbytagname('link'),         head = document.getelementsbytagname('head')[0];      (var = 0; < stylesheets.length; i++) {         if (stylesheets[i].getattribute('rel') == 'stylesheet') {             (function (stylesheet) {                 var xmlhttp = new xmlhttprequest();                 xmlhttp.open("get", stylesheet.getattribute('href'), true);                 xmlhttp.onreadystatechange = function () {                     if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {                         var inlinestyle = document.createelement('style');                         inlinestyle.setattribute('type', 'text/css');                         inlinestyle.innertext = xmlhttp.responsetext;                         head.replacechild(inlinestyle, stylesheet);                     }                 };                 xmlhttp.send();             })(stylesheets[i]);         } else {             continue;         }     }; }

then, big chunk: first shot, improve @ will. can handle inherit rules , 1 !important definition, that's it. complicated setups, have improved:

function getstyle(s, id) {     var element = typeof id === 'string' ? document.getelementbyid(id) : id,         css = window.getmatchedcssrules(element),         style = window.getcomputedstyle(element),         value = style[s],         styles = [],         rules = [],         inherited, currentrule;      // if there's computed style, start calculation     if (value) {          // add matched rules if there         if (css) {             (var = 0; < css.length; i++) {                 styles.push(css[i]);             }         }          // add element style attribute matched rule         styles.push({             style: element.style,             csstext: 'element.style {' + element.getattribute('style') + ' }'         });          (var = styles.length - 1; >= 0; i--) {             var def = styles[i],                 rule = {                     index: rules.length,                     style: s,                     value: styles[i].style[s],                     csstext: def.csstext                 };              if (rule.value == 'inherit' && !currentrule) {                 if (inherited = getinherited(element, s, value)) {                     rule.inheritedfrom = inherited;                     currentrule = rule;                     inherited = undefined;                 } else {                     rules.push(rule);                 }             } else if (rule.value == 'inherit' && currentrule && isimportant(s, value, def.csstext)) {                 if (inherited = getinherited(element, s, def)) {                     rule.inheritedfrom = inherited;                     rules.splice(currentrule.index, 0, currentrule);                     currentrule = rule;                     inherited = undefined;                 } else {                     rules.push(rule);                 }             } else if (rule.value == value && !currentrule) {                 currentrule = rule;             } else if (rule.value == value && currentrule && isimportant(s, value, def.csstext)) {                 rules.splice(currentrule.index, 0, currentrule);                 currentrule = rule;             } else if (rule.value.length) {                 rules.push(rule)             }         }          return {             current: currentrule,             overwritten: rules         };      } else {         return false;     } }

if inheritance taking place, walk dom nodes find element defines css rule helper function , style:

function getinherited(element, s, value) {     while (element.parentnode && window.getcomputedstyle(element.parentnode)[s] == value) {         element = element.parentnode;     }      if (element) {         return getstyle(s, element).current;     } else {         return null;     } }

we determine if css rule marked important helper function:

function isimportant(s, style, text) {     return new regexp(s.replace(/([a-z])/g, '-$1').tolowercase() + ':\\s+' + style + '\\s+!important').test(text) }

have @ fiddle see working


Comments

Post a Comment

Popular posts from this blog

django - How can I change user group without delete record -

-
on website user have 1 group. , user can change group. it's made user.groups.clear() and user.groups.add(new_group) but it's not efficient, because there 2 sql query: delete, insert. how can change group update query? user , group related each other using manytomanyfield . means intersection table exists relating both entities, , if don't specify model map (using through attribute) django creates 1 you. looking @ sources django.contrib.auth.models see that's case. fortunatly, can access intermediary model using through attribute of manager (in case, user.groups.through ). can use regular model. example: >>> alice = user.objects.create_user('alice', 'alice@example.com', 'alicepw') >>> employee = group.objects.create(name='employee') >>> manager = group.objects.create(name='manager') >>> alice.groups.add(employee) >>> alice.groups.all() [<group: employee...
Read more

java - EclipseLink JPA Object is not a known entity type -

-
i have strange problem eclipselink , object want persist. have 1 object (keypointlistimpl) stores object keypointimpl in list. persisting keypointimpl objects works great if try persist keypointlistimpl object java.lang.illegalargumentexception says object keypointimpl isn't known entity type. here keypointimpl code: @entity @table(name="keypoints") public class keypointimpl implements keypoint { @id @generatedvalue(strategy = generationtype.identity) private int id; @enumerated(enumtype.string) private detectortype keypointtype; private float x; private float y; private float size; private float angle; private float response; private int octave; private int classid; ... } here keypointlistimpl code: @entity @table(name="keypointlists") public class keypointlistimpl implements keypointlist { @id @generatedvalue(strategy = generationtype.identity) private int id; @onetoone(cascade={ca...
Read more

java - Need to add SOAP security token -

-
i need set custom soap header attribute on jax-ws generated webservice client. case webservice calls must go through proxy server requiring specific token (recieved web request header) present in soap request header. e.g.: 1 carserviceservice service = null; 2 service = new carserviceservice(new url(url), new qname(qname); 3 carserviceendpoint port = service.getcarserviceport(); it seems in line 3 wsdl retrieved , call fails due missing security token. 1 point direction on how done? a detailed example has been mentioned here: creating , deploying jax-ws web service on tomcat 6 this article shows how create , use security token .
Read more