Simplicity of DOM fetching:
console.log(document.getElementById('textBox1').style);
Check your Developer Tool and see all the object's properties. You can loop through them if needed.
Result on my div:
CSSStyleDeclaration
0: "color"
alignmentBaseline: ""
background: ""
backgroundAttachment: ""
backgroundClip: ""
backgroundColor: ""
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: ""
captionSide: ""
clear: ""
clip: ""
clipPath: ""
clipRule: ""
color: "rgb(255, 255, 255)"
colorInterpolation: ""
colorInterpolationFilters: ""
colorProfile: ""
colorRendering: ""
constructor: CSSStyleDeclarationConstructor
content: ""
counterIncrement: ""
counterReset: ""
cssText: "color: rgb(255, 255, 255); "
cursor: ""
direction: ""
display: ""
dominantBaseline: ""
emptyCells: ""
enableBackground: ""
fill: ""
fillOpacity: ""
fillRule: ""
filter: ""
float: ""
floodColor: ""
floodOpacity: ""
font: ""
fontFamily: ""
fontSize: ""
fontStretch: ""
fontStyle: ""
fontVariant: ""
fontWeight: ""
glyphOrientationHorizontal: ""
glyphOrientationVertical: ""
height: ""
imageRendering: ""
kerning: ""
left: ""
length: 1
letterSpacing: ""
lightingColor: ""
lineHeight: ""
listStyle: ""
listStyleImage: ""
listStylePosition: ""
listStyleType: ""
margin: ""
marginBottom: ""
marginLeft: ""
marginRight: ""
marginTop: ""
marker: ""
markerEnd: ""
markerMid: ""
markerStart: ""
mask: ""
maxHeight: ""
maxWidth: ""
minHeight: ""
minWidth: ""
opacity: ""
orphans: ""
outline: ""
outlineColor: ""
outlineOffset: ""
outlineStyle: ""
outlineWidth: ""
overflow: ""
overflowX: ""
overflowY: ""
padding: ""
paddingBottom: ""
paddingLeft: ""
paddingRight: ""
paddingTop: ""
page: ""
pageBreakAfter: ""
pageBreakBefore: ""
pageBreakInside: ""
parentRule: null
pointerEvents: ""
position: ""
quotes: ""
resize: ""
right: ""
shapeRendering: ""
size: ""
speak: ""
src: ""
stopColor: ""
stopOpacity: ""
stroke: ""
strokeDasharray: ""
strokeDashoffset: ""
strokeLinecap: ""
strokeLinejoin: ""
strokeMiterlimit: ""
strokeOpacity: ""
strokeWidth: ""
tableLayout: ""
textAlign: ""
textAnchor: ""
textDecoration: ""
textIndent: ""
textLineThrough: ""
textLineThroughColor: ""
textLineThroughMode: ""
textLineThroughStyle: ""
textLineThroughWidth: ""
textOverflow: ""
textOverline: ""
textOverlineColor: ""
textOverlineMode: ""
textOverlineStyle: ""
textOverlineWidth: ""
textRendering: ""
textShadow: ""
textTransform: ""
textUnderline: ""
textUnderlineColor: ""
textUnderlineMode: ""
textUnderlineStyle: ""
textUnderlineWidth: ""
top: ""
unicodeBidi: ""
unicodeRange: ""
vectorEffect: ""
verticalAlign: ""
visibility: ""
webkitAnimation: ""
webkitAnimationDelay: ""
webkitAnimationDirection: ""
webkitAnimationDuration: ""
webkitAnimationFillMode: ""
webkitAnimationIterationCount: ""
webkitAnimationName: ""
webkitAnimationPlayState: ""
webkitAnimationTimingFunction: ""
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: ""
webkitBoxDirection: ""
webkitBoxFlex: ""
webkitBoxFlexGroup: ""
webkitBoxLines: ""
webkitBoxOrdinalGroup: ""
webkitBoxOrient: ""
webkitBoxPack: ""
webkitBoxReflect: ""
webkitBoxShadow: ""
webkitColorCorrection: ""
webkitColumnAxis: ""
webkitColumnBreakAfter: ""
webkitColumnBreakBefore: ""
webkitColumnBreakInside: ""
webkitColumnCount: ""
webkitColumnGap: ""
webkitColumnRule: ""
webkitColumnRuleColor: ""
webkitColumnRuleStyle: ""
webkitColumnRuleWidth: ""
webkitColumnSpan: ""
webkitColumnWidth: ""
webkitColumns: ""
webkitDashboardRegion: ""
webkitFilter: ""
webkitFontFeatureSettings: ""
webkitFontKerning: ""
webkitFontSizeDelta: ""
webkitFontSmoothing: ""
webkitFontVariantLigatures: ""
webkitGridColumn: ""
webkitGridColumns: ""
webkitGridRow: ""
webkitGridRows: ""
webkitHighlight: ""
webkitHyphenateCharacter: ""
webkitHyphenateLimitAfter: ""
webkitHyphenateLimitBefore: ""
webkitHyphenateLimitLines: ""
webkitHyphens: ""
webkitLineAlign: ""
webkitLineBoxContain: ""
webkitLineBreak: ""
webkitLineClamp: ""
webkitLineGrid: ""
webkitLineSnap: ""
webkitLocale: ""
webkitLogicalHeight: ""
webkitLogicalWidth: ""
webkitMarginAfter: ""
webkitMarginAfterCollapse: ""
webkitMarginBefore: ""
webkitMarginBeforeCollapse: ""
webkitMarginBottomCollapse: ""
webkitMarginCollapse: ""
webkitMarginEnd: ""
webkitMarginStart: ""
webkitMarginTopCollapse: ""
webkitMarquee: ""
webkitMarqueeDirection: ""
webkitMarqueeIncrement: ""
webkitMarqueeRepetition: ""
webkitMarqueeSpeed: ""
webkitMarqueeStyle: ""
webkitMask: ""
webkitMaskAttachment: ""
webkitMaskBoxImage: ""
webkitMaskBoxImageOutset: ""
webkitMaskBoxImageRepeat: ""
webkitMaskBoxImageSlice: ""
webkitMaskBoxImageSource: ""
webkitMaskBoxImageWidth: ""
webkitMaskClip: ""
webkitMaskComposite: ""
webkitMaskImage: ""
webkitMaskOrigin: ""
webkitMaskPosition: ""
webkitMaskPositionX: ""
webkitMaskPositionY: ""
webkitMaskRepeat: ""
webkitMaskRepeatX: ""
webkitMaskRepeatY: ""
webkitMaskSize: ""
webkitMatchNearestMailBlockquoteColor: ""
webkitMaxLogicalHeight: ""
webkitMaxLogicalWidth: ""
webkitMinLogicalHeight: ""
webkitMinLogicalWidth: ""
webkitNbspMode: ""
webkitPaddingAfter: ""
webkitPaddingBefore: ""
webkitPaddingEnd: ""
webkitPaddingStart: ""
webkitPerspective: ""
webkitPerspectiveOrigin: ""
webkitPerspectiveOriginX: ""
webkitPerspectiveOriginY: ""
webkitPrintColorAdjust: ""
webkitRtlOrdering: ""
webkitSvgShadow: ""
webkitTextCombine: ""
webkitTextDecorationsInEffect: ""
webkitTextEmphasis: ""
webkitTextEmphasisColor: ""
webkitTextEmphasisPosition: ""
webkitTextEmphasisStyle: ""
webkitTextFillColor: ""
webkitTextOrientation: ""
webkitTextSecurity: ""
webkitTextSizeAdjust: ""
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: ""
__proto__: CSSStyleDeclarationPrototype
getPropertyCSSValue: function getPropertyCSSValue() {
getPropertyPriority: function getPropertyPriority() {
getPropertyShorthand: function getPropertyShorthand() {
getPropertyValue: function getPropertyValue() {
isPropertyImplicit: function isPropertyImplicit() {
item: function item() {
removeProperty: function removeProperty() {
setProperty: function setProperty() {
__proto__: Object
Detailed
console.log(document.getElementById('textBox1').style.color);
..will result in:
color: "rgb(255, 255, 255)"
Looping (basic example, might need to be refined)
var styles = document.getElementById('textBox1').style;
for (var i in styles) {
if (
i !== '0'
&& styles[i] != ''
&& styles[i] != undefined
&& styles[i] != null
&& styles.hasOwnProperty(i)
&& styles[i].length != undefined) {
console.log(i + ' : ' + styles[i] + ' : ' + styles[i].length);
}
}
..returns:
color : rgb(255, 255, 255) : 18
cssText : color: rgb(255, 255, 255); : 27
Notes
These calls don't seem to fetch the inherited styles! For example if the parent of the Node has font-size: 16px, the fontSize property will not be inherited. So you have to walk the DOM tree until you reach the actual Node and then collect all styles. Yet this also requires you to know which will be inherited and which won't. This will be a big hassle to do code-wise.
If anyone can comment on to do this more efficient, I'm all ears :)
More variance
If you use the Stylesheet calls you will get a method to call the parentStyle, like so:
var rules = document.styleSheets[0].cssRules;
//console.log(rules);
for (var i in rules) {
var selector = rules[i].selectorText;
if (selector != undefined) {
var regex = selector.match(/textBox1/g);
if (regex !== null && regex.length > 0) {
console.log(rules[i].style);
}
}
}
..you will find this info inside:
parentRule: CSSStyleRule
constructor: CSSStyleRuleConstructor
cssText: "#textBox1 { color: red; }"
parentRule: null
parentStyleSheet: CSSStyleSheet
selectorText: "#textBox1"
style: CSSStyleDeclaration
type: 1
__proto__: CSSStyleRulePrototype
Be aware that this method requires you to have set all styles through the Stylesheet you are calling. This example also only works as selecting the first stylesheet found. If you have more than one stylesheet, you will need to loop-match or know the index up front.
Resources
