要素に設定された style を取得する方法 - for ... in ではなく cssText で取るのが良さそう

イントロダクション

要素に設定したスタイルシートを取得する方法を考えてみました。

方法

以下のコードにより、要素の style 属性の内容を列挙してみました。

コード

<div id="test" style="color:#ff0000; background-color:#000000;">
TEST.
</div>

<script type="text/javascript">
<!--

    var obj = document.getElementById("test");
    document.writeln("obj.style=" + obj.style + "</br ></br >");

    for (var x in obj.style) {
        document.writeln("" + x + "=" + obj.style[x] + "</br >");
    }

//-->
</script>

結果

TEST.

obj.style=[object CSSStyleDeclaration]

0=color
1=background-color
parentRule=null
length=2
cssText=color: rgb(255, 0, 0); background-color: rgb(0, 0, 0);
alignContent=
alignItems=
alignSelf=
alignmentBaseline=
background=rgb(0, 0, 0)
backgroundAttachment=
backgroundClip=
backgroundColor=rgb(0, 0, 0)
backgroundImage=
backgroundOrigin=
backgroundPosition=
backgroundPositionX=
backgroundPositionY=
backgroundRepeat=
backgroundRepeatX=
backgroundRepeatY=
backgroundSize=
baselineShift=
border=
borderBottom=
borderBottomColor=
borderBottomLeftRadius=
borderBottomRightRadius=
borderBottomStyle=
borderBottomWidth=
borderCollapse=
borderColor=
borderImage=
borderImageOutset=
borderImageRepeat=
borderImageSlice=
borderImageSource=
borderImageWidth=
borderLeft=
borderLeftColor=
borderLeftStyle=
borderLeftWidth=
borderRadius=
borderRight=
borderRightColor=
borderRightStyle=
borderRightWidth=
borderSpacing=
borderStyle=
borderTop=
borderTopColor=
borderTopLeftRadius=
borderTopRightRadius=
borderTopStyle=
borderTopWidth=
borderWidth=
bottom=
boxShadow=
boxSizing=
bufferedRendering=
captionSide=
clear=
clip=
clipPath=
clipRule=
color=rgb(255, 0, 0)
colorInterpolation=
colorInterpolationFilters=
colorProfile=
colorRendering=
content=
counterIncrement=
counterReset=
cursor=
direction=
display=
dominantBaseline=
emptyCells=
enableBackground=
fill=
fillOpacity=
fillRule=
filter=
flex=
flexBasis=
flexDirection=
flexFlow=
flexGrow=
flexShrink=
flexWrap=
float=
floodColor=
floodOpacity=
font=
fontFamily=
fontKerning=
fontSize=
fontStretch=
fontStyle=
fontVariant=
fontVariantLigatures=
fontWeight=
glyphOrientationHorizontal=
glyphOrientationVertical=
height=
imageRendering=
justifyContent=
kerning=
left=
letterSpacing=
lightingColor=
lineHeight=
listStyle=
listStyleImage=
listStylePosition=
listStyleType=
margin=
marginBottom=
marginLeft=
marginRight=
marginTop=
marker=
markerEnd=
markerMid=
markerStart=
mask=
maskType=
maxHeight=
maxWidth=
maxZoom=
minHeight=
minWidth=
minZoom=
objectFit=
objectPosition=
opacity=
order=
orientation=
orphans=
outline=
outlineColor=
outlineOffset=
outlineStyle=
outlineWidth=
overflow=
overflowWrap=
overflowX=
overflowY=
padding=
paddingBottom=
paddingLeft=
paddingRight=
paddingTop=
page=
pageBreakAfter=
pageBreakBefore=
pageBreakInside=
pointerEvents=
position=
quotes=
resize=
right=
shapeRendering=
size=
speak=
src=
stopColor=
stopOpacity=
stroke=
strokeDasharray=
strokeDashoffset=
strokeLinecap=
strokeLinejoin=
strokeMiterlimit=
strokeOpacity=
strokeWidth=
tabSize=
tableLayout=
textAlign=
textAnchor=
textDecoration=
textIndent=
textLineThroughColor=
textLineThroughMode=
textLineThroughStyle=
textLineThroughWidth=
textOverflow=
textOverlineColor=
textOverlineMode=
textOverlineStyle=
textOverlineWidth=
textRendering=
textShadow=
textTransform=
textUnderlineColor=
textUnderlineMode=
textUnderlineStyle=
textUnderlineWidth=
top=
transition=
transitionDelay=
transitionDuration=
transitionProperty=
transitionTimingFunction=
unicodeBidi=
unicodeRange=
userZoom=
vectorEffect=
verticalAlign=
visibility=
webkitAnimation=
webkitAnimationDelay=
webkitAnimationDirection=
webkitAnimationDuration=
webkitAnimationFillMode=
webkitAnimationIterationCount=
webkitAnimationName=
webkitAnimationPlayState=
webkitAnimationTimingFunction=
webkitAppRegion=
webkitAppearance=
webkitAspectRatio=
webkitBackfaceVisibility=
webkitBackgroundClip=
webkitBackgroundComposite=
webkitBackgroundOrigin=
webkitBackgroundSize=
webkitBorderAfter=
webkitBorderAfterColor=
webkitBorderAfterStyle=
webkitBorderAfterWidth=
webkitBorderBefore=
webkitBorderBeforeColor=
webkitBorderBeforeStyle=
webkitBorderBeforeWidth=
webkitBorderEnd=
webkitBorderEndColor=
webkitBorderEndStyle=
webkitBorderEndWidth=
webkitBorderFit=
webkitBorderHorizontalSpacing=
webkitBorderImage=
webkitBorderRadius=
webkitBorderStart=
webkitBorderStartColor=
webkitBorderStartStyle=
webkitBorderStartWidth=
webkitBorderVerticalSpacing=
webkitBoxAlign=
webkitBoxDecorationBreak=
webkitBoxDirection=
webkitBoxFlex=
webkitBoxFlexGroup=
webkitBoxLines=
webkitBoxOrdinalGroup=
webkitBoxOrient=
webkitBoxPack=
webkitBoxReflect=
webkitBoxShadow=
webkitClipPath=
webkitColumnAxis=
webkitColumnBreakAfter=
webkitColumnBreakBefore=
webkitColumnBreakInside=
webkitColumnCount=
webkitColumnGap=
webkitColumnProgression=
webkitColumnRule=
webkitColumnRuleColor=
webkitColumnRuleStyle=
webkitColumnRuleWidth=
webkitColumnSpan=
webkitColumnWidth=
webkitColumns=
webkitFilter=
webkitFontFeatureSettings=
webkitFontSizeDelta=
webkitFontSmoothing=
webkitHighlight=
webkitHyphenateCharacter=
webkitLineBoxContain=
webkitLineBreak=
webkitLineClamp=
webkitLocale=
webkitLogicalHeight=
webkitLogicalWidth=
webkitMarginAfter=
webkitMarginAfterCollapse=
webkitMarginBefore=
webkitMarginBeforeCollapse=
webkitMarginBottomCollapse=
webkitMarginCollapse=
webkitMarginEnd=
webkitMarginStart=
webkitMarginTopCollapse=
webkitMask=
webkitMaskBoxImage=
webkitMaskBoxImageOutset=
webkitMaskBoxImageRepeat=
webkitMaskBoxImageSlice=
webkitMaskBoxImageSource=
webkitMaskBoxImageWidth=
webkitMaskClip=
webkitMaskComposite=
webkitMaskImage=
webkitMaskOrigin=
webkitMaskPosition=
webkitMaskPositionX=
webkitMaskPositionY=
webkitMaskRepeat=
webkitMaskRepeatX=
webkitMaskRepeatY=
webkitMaskSize=
webkitMaxLogicalHeight=
webkitMaxLogicalWidth=
webkitMinLogicalHeight=
webkitMinLogicalWidth=
webkitPaddingAfter=
webkitPaddingBefore=
webkitPaddingEnd=
webkitPaddingStart=
webkitPerspective=
webkitPerspectiveOrigin=
webkitPerspectiveOriginX=
webkitPerspectiveOriginY=
webkitPrintColorAdjust=
webkitRtlOrdering=
webkitRubyPosition=
webkitTapHighlightColor=
webkitTextCombine=
webkitTextDecorationsInEffect=
webkitTextEmphasis=
webkitTextEmphasisColor=
webkitTextEmphasisPosition=
webkitTextEmphasisStyle=
webkitTextFillColor=
webkitTextOrientation=
webkitTextSecurity=
webkitTextStroke=
webkitTextStrokeColor=
webkitTextStrokeWidth=
webkitTransform=
webkitTransformOrigin=
webkitTransformOriginX=
webkitTransformOriginY=
webkitTransformOriginZ=
webkitTransformStyle=
webkitTransition=
webkitTransitionDelay=
webkitTransitionDuration=
webkitTransitionProperty=
webkitTransitionTimingFunction=
webkitUserDrag=
webkitUserModify=
webkitUserSelect=
webkitWritingMode=
whiteSpace=
widows=
width=
wordBreak=
wordSpacing=
wordWrap=
writingMode=
zIndex=
zoom=
getPropertyValue=function getPropertyValue() { [native code] }
removeProperty=function removeProperty() { [native code] }
getPropertyPriority=function getPropertyPriority() { [native code] }
setProperty=function setProperty() { [native code] }
item=function item() { [native code] }
getPropertyCSSValue=function getPropertyCSSValue() { [native code] }

まとめ

style 属性を for ... in で列挙して、値が設定されているものを列挙しようかと思いましたが、for ... in で列挙されるものには style 以外も含まれているので、その分離が大変そうです。

列挙されたものを見てみると、cssText にて、

color: rgb(255, 0, 0); background-color: rgb(0, 0, 0);

という形で style 設定したスタイルシートが取得できているので、cssText でスタイルシートを取得するのが良さそうです。

参考文献

for...in - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in

HTMLElement.style - Web API Interfaces | MDN
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

style.cssText の使い処に関する考察 - IT戦記
http://d.hatena.ne.jp/amachang/20070730/1185788557