CODEWITHSUNDEEP
javascriptcssdom
Claudio Ferraro
Claudio Ferraro

Reputation: 4721

Retrieving the Keys of the CSSStyleDeclaration native Javascript object

I would like to retrieve a list of all available keys/styles which can be set to a dom object: the CSSStyleDeclaration object. If I run this line of code in chrome

console.log(Object.keys(document.querySelector('.class1').style));

I get the expected result:

(517) ["alignContent", "alignItems", "alignSelf", "alignmentBaseline", "all", "animation", "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationName", "animationPlayState", "animationTimingFunction", "backdropFilter", "backfaceVisibility", "background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundColor", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundRepeatX", "backgroundRepeatY", "backgroundSize", "baselineShift", "blockSize", "border", "borderBlockEnd", "borderBlockEndColor", "borderBlockEndStyle", "borderBlockEndWidth", "borderBlockStart", "borderBlockStartColor", "borderBlockStartStyle", "borderBlockStartWidth", "borderBottom", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderColor", "borderImage", "borderImageOutset", "borderImageRepeat", "borderImageSlice", "borderImageSource", "borderImageWidth", "borderInlineEnd", "borderInlineEndColor", "borderInlineEndStyle", "borderInlineEndWidth", "borderInlineStart", "borderInlineStartColor", "borderInlineStartStyle", "borderInlineStartWidth", "borderLeft", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRight", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderStyle", "borderTop", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxShadow", "boxSizing", "breakAfter", "breakBefore", "breakInside", "bufferedRendering", "captionSide", "caretColor", "clear", "clip", "clipPath", "clipRule", "color", "colorInterpolation", "colorInterpolationFilters", "colorRendering", "columnCount", "columnFill", …]

But in firefox I get an empty array and in Edge I get an array with only 1 item 

[object Array]: ["WebkitAnimation"]
   0: "WebkitAnimation"
   length: 1

What is wrong with my single line of code ?

Upvotes: 0

Views: 706

Answers (1)

Solomon
Solomon

Reputation: 626

The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element. use the following

let compStyles = window.getComputedStyle(document.querySelector('.class1'));
console.log(Object.values(compStyles));

Upvotes: 2

Related Questions