0

I need to be able to copy all of the CSS properties from an existing HTML element to DOM-defined element, except where CSS properties are already defined in an external stylesheet for the DOM element.

I have an external stylesheet:

#MyTargetElmnt { font-weight: bold }

This works perfectly for copying the all CSS properties:

objSource = document.getElementById('MySourceElmnt');
objCSS = window.getComputedStyle(objSource);
objTarget = document.createElement('div');

for (var i = 0; i < objCSS.length; i++) {
  objTarget.style.setProperty(objCSS[i], objCSS.getPropertyValue(objCSS[i]));
}

objTarget.setProperty('id', 'MyTargetElmnt');

...but, if the source element has a style of font-weight: normal, that's what will stick.

I think what I need is something like:

...
objTarget.setProperty('id', 'MyTargetElmnt');

for (var i = 0; i < objCSS.length; i++) {
  if (!objTarget.style.getPropertyValue(objCSS[i]) && !objTarget.style.hasOwnProperty(objCSS[i])) {
    objTarget.style.setProperty(objCSS[i], objCSS.getPropertyValue(objCSS[i]));
  }
}

I'm stuck on what to put inside if ()

I dumped the objTarget.style object into console.log and it does not contain any of the CSS properties defined the stylesheet. style.getPropertyValue is the same and I can't use getComputedStyle on the target element for comparison because it will contain all of the computed styles that I want to copy from the source element (which will cause it to copy no styles at all).

How do I obtain the CSS properties from the external stylesheet for comparison?

Recovering Nerdaholic
  • 687
  • 1
  • 7
  • 23
  • 1
    did you try `typeof objSource.css.property !== 'undefined'` ? – Zeeshan Abbas Dec 04 '13 at 16:51
  • oops, sorry, I had a typo: in the second code block, that should be `checks if objTarget` not `checks if objSource`. The problem is that `objTarget.css.property` always returns as the default or empty, even though I've given it an ID or class name that's defined in the stylesheet. – Recovering Nerdaholic Dec 04 '13 at 17:04
  • if you want to check any property is defined in javascript you can use object.property !== 'undefined'. If you already know what property you are looking for just check that against the undefined and if its undefined then it means that it doesn't exist. – Zeeshan Abbas Dec 04 '13 at 17:07
  • @QambarRaza: I understand the use of `typeof`, but that won't work in this case because they *are* defined as defaults (usually ""). The problem is determining how to get javascript to obtain style properties from the external stylesheet. – Recovering Nerdaholic Dec 04 '13 at 17:20
  • This seems something similar to what you are doing : http://stackoverflow.com/questions/2707790/get-a-css-value-from-external-style-sheet-with-javascript-jquery – Zeeshan Abbas Dec 04 '13 at 17:22
  • Did you try objSource.css.hasOwnProperty(property)? – RickyAYoder Dec 04 '13 at 19:33
  • @RickyAYoder: tried it, doesn't work. Always returns false for each property, even those that are defined in the stylesheet. – Recovering Nerdaholic Dec 04 '13 at 21:06
  • Possible duplicate of [How to check if property cssRules exists in document.styleSheets\[i\] object?](http://stackoverflow.com/questions/39226205/how-to-check-if-property-cssrules-exists-in-document-stylesheetsi-object) – Paul Sweatte Mar 04 '17 at 04:42

0 Answers0