JavaScriptで適応されているcssプロパティの値を取得する

既存のcssプロパティの値をJavaScirptで取得することがあったので、その時の対応したことになります。

結果

html

<div class="block"></div>

.block {
  width: 300px;
  height: 60px;
}

/**
 * cssで適応されているスタイルを返却
 * @param {HTMLElement} element 取得を行うHTML要素
 * @param {string} propaty cssの取得を行うプロパティ名
 * @return {string} cssのプロパティの値
 */
function getStylePropatyValue(element, propaty) {
  // 指定した要素のcssプロパティ一覧を取得
 const cssStyleDeclaration = getComputedStyle(element, null);
  // 指定したプロパティの値を取得
 const getStyleValue = cssStyleDeclaration.getPropertyValue(propaty);
  return getStyleValue;
}

// 要素の指定
const elem = document.querySelector('.block');
// 今回取得を行う要素
const cssProperty = 'height';
// cssプロパティの値を取得
const getCssPropertyValue = getStylePropatyValue(elem, cssProperty);

実行結果についてはこちらになります。

See the Pen getStylePropatyValue - sample by miwa_shuntaro (@miwashutaro0611) on CodePen.

行ったこと

1. 既存で当てられているcssプロパティの一覧を取得する

getComputedStyleメソッドを使用し、スタイルの一覧を取得する。

JavaScriptではこの部分になります。

const cssStyleDeclaration = getComputedStyle(element, null);

developer.mozilla.org

getComputedStyle(element, null) の一覧。クリックするとプロパティ一覧が開きます。(量が多いです。。)

CSSStyleDeclaration  {
0: "align-content"
1: "align-items"
2: "align-self"
3: "alignment-baseline"
4: "animation-delay"
5: "animation-direction"
6: "animation-duration"
7: "animation-fill-mode"
8: "animation-iteration-count"
9: "animation-name"
10: "animation-play-state"
11: "animation-timing-function"
12: "appearance"
13: "backdrop-filter"
14: "backface-visibility"
15: "background-attachment"
16: "background-blend-mode"
17: "background-clip"
18: "background-color"
19: "background-image"
20: "background-origin"
21: "background-position"
22: "background-repeat"
23: "background-size"
24: "baseline-shift"
25: "block-size"
26: "border-block-end-color"
27: "border-block-end-style"
28: "border-block-end-width"
29: "border-block-start-color"
30: "border-block-start-style"
31: "border-block-start-width"
32: "border-bottom-color"
33: "border-bottom-left-radius"
34: "border-bottom-right-radius"
35: "border-bottom-style"
36: "border-bottom-width"
37: "border-collapse"
38: "border-end-end-radius"
39: "border-end-start-radius"
40: "border-image-outset"
41: "border-image-repeat"
42: "border-image-slice"
43: "border-image-source"
44: "border-image-width"
45: "border-inline-end-color"
46: "border-inline-end-style"
47: "border-inline-end-width"
48: "border-inline-start-color"
49: "border-inline-start-style"
50: "border-inline-start-width"
51: "border-left-color"
52: "border-left-style"
53: "border-left-width"
54: "border-right-color"
55: "border-right-style"
56: "border-right-width"
57: "border-start-end-radius"
58: "border-start-start-radius"
59: "border-top-color"
60: "border-top-left-radius"
61: "border-top-right-radius"
62: "border-top-style"
63: "border-top-width"
64: "bottom"
65: "box-shadow"
66: "box-sizing"
67: "break-after"
68: "break-before"
69: "break-inside"
70: "buffered-rendering"
71: "caption-side"
72: "caret-color"
73: "clear"
74: "clip"
75: "clip-path"
76: "clip-rule"
77: "color"
78: "color-interpolation"
79: "color-interpolation-filters"
80: "color-rendering"
81: "column-count"
82: "column-gap"
83: "column-rule-color"
84: "column-rule-style"
85: "column-rule-width"
86: "column-span"
87: "column-width"
88: "content"
89: "cursor"
90: "cx"
91: "cy"
92: "d"
93: "direction"
94: "display"
95: "dominant-baseline"
96: "empty-cells"
97: "fill"
98: "fill-opacity"
99: "fill-rule"
100: "filter"
101: "flex-basis"
102: "flex-direction"
103: "flex-grow"
104: "flex-shrink"
105: "flex-wrap"
106: "float"
107: "flood-color"
108: "flood-opacity"
109: "font-family"
110: "font-kerning"
111: "font-optical-sizing"
112: "font-size"
113: "font-stretch"
114: "font-style"
115: "font-variant"
116: "font-variant-caps"
117: "font-variant-east-asian"
118: "font-variant-ligatures"
119: "font-variant-numeric"
120: "font-weight"
121: "grid-auto-columns"
122: "grid-auto-flow"
123: "grid-auto-rows"
124: "grid-column-end"
125: "grid-column-start"
126: "grid-row-end"
127: "grid-row-start"
128: "grid-template-areas"
129: "grid-template-columns"
130: "grid-template-rows"
131: "height"
132: "hyphens"
133: "image-orientation"
134: "image-rendering"
135: "inline-size"
136: "inset-block-end"
137: "inset-block-start"
138: "inset-inline-end"
139: "inset-inline-start"
140: "isolation"
141: "justify-content"
142: "justify-items"
143: "justify-self"
144: "left"
145: "letter-spacing"
146: "lighting-color"
147: "line-break"
148: "line-height"
149: "list-style-image"
150: "list-style-position"
151: "list-style-type"
152: "margin-block-end"
153: "margin-block-start"
154: "margin-bottom"
155: "margin-inline-end"
156: "margin-inline-start"
157: "margin-left"
158: "margin-right"
159: "margin-top"
160: "marker-end"
161: "marker-mid"
162: "marker-start"
163: "mask-type"
164: "max-block-size"
165: "max-height"
166: "max-inline-size"
167: "max-width"
168: "min-block-size"
169: "min-height"
170: "min-inline-size"
171: "min-width"
172: "mix-blend-mode"
173: "object-fit"
174: "object-position"
175: "offset-distance"
176: "offset-path"
177: "offset-rotate"
178: "opacity"
179: "order"
180: "orphans"
181: "outline-color"
182: "outline-offset"
183: "outline-style"
184: "outline-width"
185: "overflow-anchor"
186: "overflow-clip-margin"
187: "overflow-wrap"
188: "overflow-x"
189: "overflow-y"
190: "overscroll-behavior-block"
191: "overscroll-behavior-inline"
192: "padding-block-end"
193: "padding-block-start"
194: "padding-bottom"
195: "padding-inline-end"
196: "padding-inline-start"
197: "padding-left"
198: "padding-right"
199: "padding-top"
200: "paint-order"
201: "perspective"
202: "perspective-origin"
203: "pointer-events"
204: "position"
205: "r"
206: "resize"
207: "right"
208: "row-gap"
209: "ruby-position"
210: "rx"
211: "ry"
212: "scroll-behavior"
213: "scroll-margin-block-end"
214: "scroll-margin-block-start"
215: "scroll-margin-inline-end"
216: "scroll-margin-inline-start"
217: "scroll-padding-block-end"
218: "scroll-padding-block-start"
219: "scroll-padding-inline-end"
220: "scroll-padding-inline-start"
221: "shape-image-threshold"
222: "shape-margin"
223: "shape-outside"
224: "shape-rendering"
225: "speak"
226: "stop-color"
227: "stop-opacity"
228: "stroke"
229: "stroke-dasharray"
230: "stroke-dashoffset"
231: "stroke-linecap"
232: "stroke-linejoin"
233: "stroke-miterlimit"
234: "stroke-opacity"
235: "stroke-width"
236: "tab-size"
237: "table-layout"
238: "text-align"
239: "text-align-last"
240: "text-anchor"
241: "text-decoration"
242: "text-decoration-color"
243: "text-decoration-line"
244: "text-decoration-skip-ink"
245: "text-decoration-style"
246: "text-indent"
247: "text-overflow"
248: "text-rendering"
249: "text-shadow"
250: "text-size-adjust"
251: "text-transform"
252: "text-underline-position"
253: "top"
254: "touch-action"
255: "transform"
256: "transform-origin"
257: "transform-style"
258: "transition-delay"
259: "transition-duration"
260: "transition-property"
261: "transition-timing-function"
262: "unicode-bidi"
263: "user-select"
264: "vector-effect"
265: "vertical-align"
266: "visibility"
267: "white-space"
268: "widows"
269: "width"
270: "will-change"
271: "word-break"
272: "word-spacing"
273: "writing-mode"
274: "x"
275: "y"
276: "z-index"
277: "zoom"
278: "-webkit-app-region"
279: "-webkit-border-horizontal-spacing"
280: "-webkit-border-image"
281: "-webkit-border-vertical-spacing"
282: "-webkit-box-align"
283: "-webkit-box-decoration-break"
284: "-webkit-box-direction"
285: "-webkit-box-flex"
286: "-webkit-box-ordinal-group"
287: "-webkit-box-orient"
288: "-webkit-box-pack"
289: "-webkit-box-reflect"
290: "-webkit-font-smoothing"
291: "-webkit-highlight"
292: "-webkit-hyphenate-character"
293: "-webkit-line-break"
294: "-webkit-line-clamp"
295: "-webkit-locale"
296: "-webkit-mask-box-image"
297: "-webkit-mask-box-image-outset"
298: "-webkit-mask-box-image-repeat"
299: "-webkit-mask-box-image-slice"
300: "-webkit-mask-box-image-source"
301: "-webkit-mask-box-image-width"
302: "-webkit-mask-clip"
303: "-webkit-mask-composite"
304: "-webkit-mask-image"
305: "-webkit-mask-origin"
306: "-webkit-mask-position"
307: "-webkit-mask-repeat"
308: "-webkit-mask-size"
309: "-webkit-print-color-adjust"
310: "-webkit-rtl-ordering"
311: "-webkit-tap-highlight-color"
312: "-webkit-text-combine"
313: "-webkit-text-decorations-in-effect"
314: "-webkit-text-emphasis-color"
315: "-webkit-text-emphasis-position"
316: "-webkit-text-emphasis-style"
317: "-webkit-text-fill-color"
318: "-webkit-text-orientation"
319: "-webkit-text-security"
320: "-webkit-text-stroke-color"
321: "-webkit-text-stroke-width"
322: "-webkit-user-drag"
323: "-webkit-user-modify"
324: "-webkit-writing-mode"
alignContent: "normal"
alignItems: "normal"
alignSelf: "auto"
alignmentBaseline: "auto"
all: ""
animation: "none 0s ease 0s 1 normal none running"
animationDelay: "0s"
animationDirection: "normal"
animationDuration: "0s"
animationFillMode: "none"
animationIterationCount: "1"
animationName: "none"
animationPlayState: "running"
animationTimingFunction: "ease"
appearance: "none"
ascentOverride: ""
aspectRatio: "auto"
backdropFilter: "none"
backfaceVisibility: "visible"
background: "rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box"
backgroundAttachment: "scroll"
backgroundBlendMode: "normal"
backgroundClip: "border-box"
backgroundColor: "rgba(0, 0, 0, 0)"
backgroundImage: "none"
backgroundOrigin: "padding-box"
backgroundPosition: "0% 0%"
backgroundPositionX: "0%"
backgroundPositionY: "0%"
backgroundRepeat: "repeat"
backgroundRepeatX: ""
backgroundRepeatY: ""
backgroundSize: "auto"
baselineShift: "0px"
blockSize: "60px"
border: "0px none rgb(0, 0, 0)"
borderBlock: "0px none rgb(0, 0, 0)"
borderBlockColor: "rgb(0, 0, 0)"
borderBlockEnd: "0px none rgb(0, 0, 0)"
borderBlockEndColor: "rgb(0, 0, 0)"
borderBlockEndStyle: "none"
borderBlockEndWidth: "0px"
borderBlockStart: "0px none rgb(0, 0, 0)"
borderBlockStartColor: "rgb(0, 0, 0)"
borderBlockStartStyle: "none"
borderBlockStartWidth: "0px"
borderBlockStyle: "none"
borderBlockWidth: "0px"
borderBottom: "0px none rgb(0, 0, 0)"
borderBottomColor: "rgb(0, 0, 0)"
borderBottomLeftRadius: "0px"
borderBottomRightRadius: "0px"
borderBottomStyle: "none"
borderBottomWidth: "0px"
borderCollapse: "separate"
borderColor: "rgb(0, 0, 0)"
borderEndEndRadius: "0px"
borderEndStartRadius: "0px"
borderImage: "none"
borderImageOutset: "0"
borderImageRepeat: "stretch"
borderImageSlice: "100%"
borderImageSource: "none"
borderImageWidth: "1"
borderInline: "0px none rgb(0, 0, 0)"
borderInlineColor: "rgb(0, 0, 0)"
borderInlineEnd: "0px none rgb(0, 0, 0)"
borderInlineEndColor: "rgb(0, 0, 0)"
borderInlineEndStyle: "none"
borderInlineEndWidth: "0px"
borderInlineStart: "0px none rgb(0, 0, 0)"
borderInlineStartColor: "rgb(0, 0, 0)"
borderInlineStartStyle: "none"
borderInlineStartWidth: "0px"
borderInlineStyle: "none"
borderInlineWidth: "0px"
borderLeft: "0px none rgb(0, 0, 0)"
borderLeftColor: "rgb(0, 0, 0)"
borderLeftStyle: "none"
borderLeftWidth: "0px"
borderRadius: "0px"
borderRight: "0px none rgb(0, 0, 0)"
borderRightColor: "rgb(0, 0, 0)"
borderRightStyle: "none"
borderRightWidth: "0px"
borderSpacing: "0px 0px"
borderStartEndRadius: "0px"
borderStartStartRadius: "0px"
borderStyle: "none"
borderTop: "0px none rgb(0, 0, 0)"
borderTopColor: "rgb(0, 0, 0)"
borderTopLeftRadius: "0px"
borderTopRightRadius: "0px"
borderTopStyle: "none"
borderTopWidth: "0px"
borderWidth: "0px"
bottom: "auto"
boxShadow: "none"
boxSizing: "content-box"
breakAfter: "auto"
breakBefore: "auto"
breakInside: "auto"
bufferedRendering: "auto"
captionSide: "top"
caretColor: "rgb(0, 0, 0)"
clear: "none"
clip: "auto"
clipPath: "none"
clipRule: "nonzero"
color: "rgb(0, 0, 0)"
colorInterpolation: "srgb"
colorInterpolationFilters: "linearrgb"
colorRendering: "auto"
colorScheme: "normal"
columnCount: "auto"
columnFill: "balance"
columnGap: "normal"
columnRule: "0px none rgb(0, 0, 0)"
columnRuleColor: "rgb(0, 0, 0)"
columnRuleStyle: "none"
columnRuleWidth: "0px"
columnSpan: "none"
columnWidth: "auto"
columns: "auto auto"
contain: "none"
containIntrinsicSize: "auto"
content: "normal"
contentVisibility: "visible"
counterIncrement: "none"
counterReset: "none"
counterSet: "none"
cssFloat: "none"
cssText: ""
cursor: "auto"
cx: "0px"
cy: "0px"
d: "none"
descentOverride: ""
direction: "ltr"
display: "block"
dominantBaseline: "auto"
emptyCells: "show"
fill: "rgb(0, 0, 0)"
fillOpacity: "1"
fillRule: "nonzero"
filter: "none"
flex: "0 1 auto"
flexBasis: "auto"
flexDirection: "row"
flexFlow: "row nowrap"
flexGrow: "0"
flexShrink: "1"
flexWrap: "nowrap"
float: "none"
floodColor: "rgb(0, 0, 0)"
floodOpacity: "1"
font: "16px \"Hiragino Kaku Gothic ProN\""
fontDisplay: ""
fontFamily: "\"Hiragino Kaku Gothic ProN\""
fontFeatureSettings: "normal"
fontKerning: "auto"
fontOpticalSizing: "auto"
fontSize: "16px"
fontStretch: "100%"
fontStyle: "normal"
fontVariant: "normal"
fontVariantCaps: "normal"
fontVariantEastAsian: "normal"
fontVariantLigatures: "normal"
fontVariantNumeric: "normal"
fontVariationSettings: "normal"
fontWeight: "400"
forcedColorAdjust: "auto"
gap: "normal"
grid: "none / none / none / row / auto / auto"
gridArea: "auto / auto / auto / auto"
gridAutoColumns: "auto"
gridAutoFlow: "row"
gridAutoRows: "auto"
gridColumn: "auto / auto"
gridColumnEnd: "auto"
gridColumnGap: "normal"
gridColumnStart: "auto"
gridGap: "normal normal"
gridRow: "auto / auto"
gridRowEnd: "auto"
gridRowGap: "normal"
gridRowStart: "auto"
gridTemplate: "none / none / none"
gridTemplateAreas: "none"
gridTemplateColumns: "none"
gridTemplateRows: "none"
height: "60px"
hyphens: "manual"
imageOrientation: "from-image"
imageRendering: "auto"
inherits: ""
initialValue: ""
inlineSize: "300px"
inset: "auto"
insetBlock: "auto"
insetBlockEnd: "auto"
insetBlockStart: "auto"
insetInline: "auto"
insetInlineEnd: "auto"
insetInlineStart: "auto"
isolation: "auto"
justifyContent: "normal"
justifyItems: "normal"
justifySelf: "auto"
left: "auto"
length: 325
letterSpacing: "normal"
lightingColor: "rgb(255, 255, 255)"
lineBreak: "auto"
lineGapOverride: ""
lineHeight: "normal"
listStyle: "outside none disc"
listStyleImage: "none"
listStylePosition: "outside"
listStyleType: "disc"
margin: "0px"
marginBlock: "0px"
marginBlockEnd: "0px"
marginBlockStart: "0px"
marginBottom: "0px"
marginInline: "0px"
marginInlineEnd: "0px"
marginInlineStart: "0px"
marginLeft: "0px"
marginRight: "0px"
marginTop: "0px"
marker: "none"
markerEnd: "none"
markerMid: "none"
markerStart: "none"
mask: "none"
maskType: "luminance"
maxBlockSize: "none"
maxHeight: "none"
maxInlineSize: "none"
maxWidth: "none"
maxZoom: ""
minBlockSize: "0px"
minHeight: "0px"
minInlineSize: "0px"
minWidth: "0px"
minZoom: ""
mixBlendMode: "normal"
objectFit: "fill"
objectPosition: "50% 50%"
offset: "none 0px auto 0deg"
offsetDistance: "0px"
offsetPath: "none"
offsetRotate: "auto 0deg"
opacity: "1"
order: "0"
orientation: ""
orphans: "2"
outline: "rgb(0, 0, 0) none 0px"
outlineColor: "rgb(0, 0, 0)"
outlineOffset: "0px"
outlineStyle: "none"
outlineWidth: "0px"
overflow: "visible"
overflowAnchor: "auto"
overflowClipMargin: "0px"
overflowWrap: "normal"
overflowX: "visible"
overflowY: "visible"
overscrollBehavior: "auto"
overscrollBehaviorBlock: "auto"
overscrollBehaviorInline: "auto"
overscrollBehaviorX: "auto"
overscrollBehaviorY: "auto"
padding: "0px"
paddingBlock: "0px"
paddingBlockEnd: "0px"
paddingBlockStart: "0px"
paddingBottom: "0px"
paddingInline: "0px"
paddingInlineEnd: "0px"
paddingInlineStart: "0px"
paddingLeft: "0px"
paddingRight: "0px"
paddingTop: "0px"
page: "auto"
pageBreakAfter: "auto"
pageBreakBefore: "auto"
pageBreakInside: "auto"
pageOrientation: ""
paintOrder: "normal"
parentRule: null
perspective: "none"
perspectiveOrigin: "150px 30px"
placeContent: "normal"
placeItems: "normal"
placeSelf: "auto"
pointerEvents: "auto"
position: "static"
quotes: "auto"
r: "0px"
resize: "none"
right: "auto"
rowGap: "normal"
rubyPosition: "over"
rx: "auto"
ry: "auto"
scrollBehavior: "auto"
scrollMargin: "0px"
scrollMarginBlock: "0px"
scrollMarginBlockEnd: "0px"
scrollMarginBlockStart: "0px"
scrollMarginBottom: "0px"
scrollMarginInline: "0px"
scrollMarginInlineEnd: "0px"
scrollMarginInlineStart: "0px"
scrollMarginLeft: "0px"
scrollMarginRight: "0px"
scrollMarginTop: "0px"
scrollPadding: "auto"
scrollPaddingBlock: "auto"
scrollPaddingBlockEnd: "auto"
scrollPaddingBlockStart: "auto"
scrollPaddingBottom: "auto"
scrollPaddingInline: "auto"
scrollPaddingInlineEnd: "auto"
scrollPaddingInlineStart: "auto"
scrollPaddingLeft: "auto"
scrollPaddingRight: "auto"
scrollPaddingTop: "auto"
scrollSnapAlign: "none"
scrollSnapStop: "normal"
scrollSnapType: "none"
shapeImageThreshold: "0"
shapeMargin: "0px"
shapeOutside: "none"
shapeRendering: "auto"
size: ""
speak: "normal"
src: ""
stopColor: "rgb(0, 0, 0)"
stopOpacity: "1"
stroke: "none"
strokeDasharray: "none"
strokeDashoffset: "0px"
strokeLinecap: "butt"
strokeLinejoin: "miter"
strokeMiterlimit: "4"
strokeOpacity: "1"
strokeWidth: "1px"
syntax: ""
tabSize: "8"
tableLayout: "auto"
textAlign: "start"
textAlignLast: "auto"
textAnchor: "start"
textCombineUpright: "none"
textDecoration: "none solid rgb(0, 0, 0)"
textDecorationColor: "rgb(0, 0, 0)"
textDecorationLine: "none"
textDecorationSkipInk: "auto"
textDecorationStyle: "solid"
textDecorationThickness: "auto"
textIndent: "0px"
textOrientation: "mixed"
textOverflow: "clip"
textRendering: "auto"
textShadow: "none"
textSizeAdjust: "auto"
textTransform: "none"
textUnderlineOffset: "auto"
textUnderlinePosition: "auto"
top: "auto"
touchAction: "auto"
transform: "none"
transformBox: "view-box"
transformOrigin: "150px 30px"
transformStyle: "flat"
transition: "all 0s ease 0s"
transitionDelay: "0s"
transitionDuration: "0s"
transitionProperty: "all"
transitionTimingFunction: "ease"
unicodeBidi: "normal"
unicodeRange: ""
userSelect: "auto"
userZoom: ""
vectorEffect: "none"
verticalAlign: "baseline"
visibility: "visible"
webkitAlignContent: "normal"
webkitAlignItems: "normal"
webkitAlignSelf: "auto"
webkitAnimation: "none 0s ease 0s 1 normal none running"
webkitAnimationDelay: "0s"
webkitAnimationDirection: "normal"
webkitAnimationDuration: "0s"
webkitAnimationFillMode: "none"
webkitAnimationIterationCount: "1"
webkitAnimationName: "none"
webkitAnimationPlayState: "running"
webkitAnimationTimingFunction: "ease"
webkitAppRegion: "none"
webkitAppearance: "none"
webkitBackfaceVisibility: "visible"
webkitBackgroundClip: "border-box"
webkitBackgroundOrigin: "padding-box"
webkitBackgroundSize: "auto"
webkitBorderAfter: "0px none rgb(0, 0, 0)"
webkitBorderAfterColor: "rgb(0, 0, 0)"
webkitBorderAfterStyle: "none"
webkitBorderAfterWidth: "0px"
webkitBorderBefore: "0px none rgb(0, 0, 0)"
webkitBorderBeforeColor: "rgb(0, 0, 0)"
webkitBorderBeforeStyle: "none"
webkitBorderBeforeWidth: "0px"
webkitBorderBottomLeftRadius: "0px"
webkitBorderBottomRightRadius: "0px"
webkitBorderEnd: "0px none rgb(0, 0, 0)"
webkitBorderEndColor: "rgb(0, 0, 0)"
webkitBorderEndStyle: "none"
webkitBorderEndWidth: "0px"
webkitBorderHorizontalSpacing: "0px"
webkitBorderImage: "none"
webkitBorderRadius: "0px"
webkitBorderStart: "0px none rgb(0, 0, 0)"
webkitBorderStartColor: "rgb(0, 0, 0)"
webkitBorderStartStyle: "none"
webkitBorderStartWidth: "0px"
webkitBorderTopLeftRadius: "0px"
webkitBorderTopRightRadius: "0px"
webkitBorderVerticalSpacing: "0px"
webkitBoxAlign: "stretch"
webkitBoxDecorationBreak: "slice"
webkitBoxDirection: "normal"
webkitBoxFlex: "0"
webkitBoxOrdinalGroup: "1"
webkitBoxOrient: "horizontal"
webkitBoxPack: "start"
webkitBoxReflect: "none"
webkitBoxShadow: "none"
webkitBoxSizing: "content-box"
webkitClipPath: "none"
webkitColumnBreakAfter: "auto"
webkitColumnBreakBefore: "auto"
webkitColumnBreakInside: "auto"
webkitColumnCount: "auto"
webkitColumnGap: "normal"
webkitColumnRule: "0px none rgb(0, 0, 0)"
webkitColumnRuleColor: "rgb(0, 0, 0)"
webkitColumnRuleStyle: "none"
webkitColumnRuleWidth: "0px"
webkitColumnSpan: "none"
webkitColumnWidth: "auto"
webkitColumns: "auto auto"
webkitFilter: "none"
webkitFlex: "0 1 auto"
webkitFlexBasis: "auto"
webkitFlexDirection: "row"
webkitFlexFlow: "row nowrap"
webkitFlexGrow: "0"
webkitFlexShrink: "1"
webkitFlexWrap: "nowrap"
webkitFontFeatureSettings: "normal"
webkitFontSmoothing: "auto"
webkitHighlight: "none"
webkitHyphenateCharacter: "auto"
webkitJustifyContent: "normal"
webkitLineBreak: "auto"
webkitLineClamp: "none"
webkitLocale: "\"en\""
webkitLogicalHeight: "60px"
webkitLogicalWidth: "300px"
webkitMarginAfter: "0px"
webkitMarginBefore: "0px"
webkitMarginEnd: "0px"
webkitMarginStart: "0px"
webkitMask: ""
webkitMaskBoxImage: "none"
webkitMaskBoxImageOutset: "0"
webkitMaskBoxImageRepeat: "stretch"
webkitMaskBoxImageSlice: "0 fill"
webkitMaskBoxImageSource: "none"
webkitMaskBoxImageWidth: "auto"
webkitMaskClip: "border-box"
webkitMaskComposite: "source-over"
webkitMaskImage: "none"
webkitMaskOrigin: "border-box"
webkitMaskPosition: "0% 0%"
webkitMaskPositionX: "0%"
webkitMaskPositionY: "0%"
webkitMaskRepeat: "repeat"
webkitMaskRepeatX: ""
webkitMaskRepeatY: ""
webkitMaskSize: "auto"
webkitMaxLogicalHeight: "none"
webkitMaxLogicalWidth: "none"
webkitMinLogicalHeight: "0px"
webkitMinLogicalWidth: "0px"
webkitOpacity: "1"
webkitOrder: "0"
webkitPaddingAfter: "0px"
webkitPaddingBefore: "0px"
webkitPaddingEnd: "0px"
webkitPaddingStart: "0px"
webkitPerspective: "none"
webkitPerspectiveOrigin: "150px 30px"
webkitPerspectiveOriginX: ""
webkitPerspectiveOriginY: ""
webkitPrintColorAdjust: "economy"
webkitRtlOrdering: "logical"
webkitRubyPosition: "before"
webkitShapeImageThreshold: "0"
webkitShapeMargin: "0px"
webkitShapeOutside: "none"
webkitTapHighlightColor: "rgba(0, 0, 0, 0.18)"
webkitTextCombine: "none"
webkitTextDecorationsInEffect: "none"
webkitTextEmphasis: ""
webkitTextEmphasisColor: "rgb(0, 0, 0)"
webkitTextEmphasisPosition: "over right"
webkitTextEmphasisStyle: "none"
webkitTextFillColor: "rgb(0, 0, 0)"
webkitTextOrientation: "vertical-right"
webkitTextSecurity: "none"
webkitTextSizeAdjust: "auto"
webkitTextStroke: ""
webkitTextStrokeColor: "rgb(0, 0, 0)"
webkitTextStrokeWidth: "0px"
webkitTransform: "none"
webkitTransformOrigin: "150px 30px"
webkitTransformOriginX: ""
webkitTransformOriginY: ""
webkitTransformOriginZ: ""
webkitTransformStyle: "flat"
webkitTransition: "all 0s ease 0s"
webkitTransitionDelay: "0s"
webkitTransitionDuration: "0s"
webkitTransitionProperty: "all"
webkitTransitionTimingFunction: "ease"
webkitUserDrag: "auto"
webkitUserModify: "read-only"
webkitUserSelect: "auto"
webkitWritingMode: "horizontal-tb"
whiteSpace: "normal"
widows: "2"
width: "300px"
willChange: "auto"
wordBreak: "normal"
wordSpacing: "0px"
wordWrap: "normal"
writingMode: "horizontal-tb"
x: "0px"
y: "0px"
zIndex: "auto"
zoom: "1"
}

2. 取得したいプロパティを選択し、その適応されている値を取得する。

要素に対するcssプロパティの値の一覧を取得することができたので、取得したいプロパティを選択して、その値を取得します。

JavaScirptでは以下の部分になります。

const getStyleValue = cssStyleDeclaration.getPropertyValue(propaty);
// 結果 → 60px

developer.mozilla.org