Can I get a string of all style attributes?

I know I can get specific style attributes: document.getElementById('bcs').style.width, for example. Is there a way I can get all the attributes settings in a single string without having to specify each one? I'd like to either specify and element, or perhaps be able to specify the css class, I don't care which.
LVL 1
jmarkfoleyAsked:
Who is Participating?
 
Richard QuadlingConnect With a Mentor Senior Software DeveloperCommented:
If you use Prototype (http://www.prototypejs.org), then ...

Object.keys($('header').style) will give you an array of all the settings.

Typing ...

Object.keys($('header').style)

in the firebug console on http://www.prototype.org's site give me the output in the snippet below.

If I use ...

var s_Style = ''; Object.keys($('header').style).each(function(key){s_Style = s_Style + key + ':' + $('header').getStyle(key) + ' ';}); s_Style;

I get ...

"length:149 cssText: getPropertyValue:function getPropertyValue() { [native code] } getPropertyCSSValue:function getPropertyCSSValue() { [native code] } removeProperty:function removeProperty() { [native code] } getPropertyPriority:function getPropertyPriority() { [native code] } setProperty:function setProperty() { [native code] } item:function item() { [native code] } parentRule:null azimuth: background: backgroundAttachment:scroll backgroundColor:transparent backgroundImage:none backgroundPosition:0% 0% backgroundRepeat:repeat border: borderCollapse:separate borderColor: borderSpacing:0px 0px borderStyle: borderTop: borderRight: borderBottom: borderLeft: borderTopColor:rgb(85, 85, 85) borderRightColor:rgb(85, 85, 85) borderBottomColor:rgb(85, 85, 85) borderLeftColor:rgb(85, 85, 85) borderTopStyle:none borderRightStyle:none borderBottomStyle:none borderLeftStyle:none borderTopWidth:0px borderRightWidth:0px borderBottomWidth:0px borderLeftWidth:0px borderWidth: bottom:0px captionSide:top clear:none clip:null color:rgb(85, 85, 85) content:none counterIncrement:none counterReset:none cue: cueAfter: cueBefore: cursor:null direction:ltr display:block elevation: emptyCells:show cssFloat:none font: fontFamily:"Lucida Grande","Helvetica Neue",Verdana,Arial,sans-serif fontSize:12px fontSizeAdjust:none fontStretch: fontStyle:normal fontVariant:normal fontWeight:400 height:123px left:0px letterSpacing:normal lineHeight:18px listStyle: listStyleImage:none listStylePosition:outside listStyleType:disc margin: marginTop:50px marginRight:0px marginBottom:0px marginLeft:0px markerOffset:null marks: maxHeight:none maxWidth:none minHeight:0px minWidth:0px orphans: outline: outlineColor:rgb(0, 0, 0) outlineStyle:none outlineWidth:0px overflow:visible padding: paddingTop:0px paddingRight:0px paddingBottom:0px paddingLeft:0px page: pageBreakAfter:null pageBreakBefore:null pageBreakInside: pause: pauseAfter: pauseBefore: pitch: pitchRange: position:relative quotes:"" "" "" "" richness: right:0px size: speak: speakHeader: speakNumeral: speakPunctuation: speechRate: stress: tableLayout:null textAlign:center textDecoration:none textIndent:0px textShadow: textTransform:none top:0px unicodeBidi:normal verticalAlign:baseline visibility:visible voiceFamily: volume: whiteSpace:normal widows: width:800px wordSpacing:normal zIndex:null MozAppearance:none MozBackgroundClip:border MozBackgroundInlinePolicy:continuous MozBackgroundOrigin:padding MozBinding:none MozBorderBottomColors:none MozBorderLeftColors:none MozBorderRightColors:none MozBorderTopColors:none MozBorderRadius: MozBorderRadiusTopleft:0px MozBorderRadiusTopright:0px MozBorderRadiusBottomleft:0px MozBorderRadiusBottomright:0px MozBoxAlign:stretch MozBoxDirection:normal MozBoxFlex:0 MozBoxOrient:horizontal MozBoxOrdinalGroup:1 MozBoxPack:start MozBoxSizing:content-box MozColumnCount:null MozColumnWidth:null MozColumnGap:12px MozFloatEdge:content-box MozForceBrokenImageIcon:0 MozImageRegion:null MozMarginEnd: MozMarginStart: MozOpacity:1 MozOutline: MozOutlineColor:rgb(0, 0, 0) MozOutlineRadius: MozOutlineRadiusTopleft:0px MozOutlineRadiusTopright:0px MozOutlineRadiusBottomleft:0px MozOutlineRadiusBottomright:0px MozOutlineStyle:none MozOutlineWidth:0px MozOutlineOffset:0px MozPaddingEnd: MozPaddingStart: MozUserFocus:none MozUserInput:null MozUserModify:read-only MozUserSelect:null opacity:1 outlineOffset:0px overflowX:visible overflowY:visible imeMode:null MozBorderEnd: MozBorderEndColor: MozBorderEndStyle: MozBorderEndWidth: MozBorderStart: MozBorderStartColor: MozBorderStartStyle: MozBorderStartWidth: "


OK. So this isn't perfect, but it is a basis to start working on.

Reject length and anything which is null or a function and you should be OK.
["length", "cssText", "getPropertyValue", "getPropertyCSSValue", "removeProperty", "getPropertyPriority", "setProperty", "item", "parentRule", "azimuth", "background", "backgroundAttachment", "backgroundColor", "backgroundImage", "backgroundPosition", "backgroundRepeat", "border", "borderCollapse", "borderColor", "borderSpacing", "borderStyle", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderWidth", "bottom", "captionSide", "clear", "clip", "color", "content", "counterIncrement", "counterReset", "cue", "cueAfter", "cueBefore", "cursor", "direction", "display", "elevation", "emptyCells", "cssFloat", "font", "fontFamily", "fontSize", "fontSizeAdjust", "fontStretch", "fontStyle", "fontVariant", "fontWeight", "height", "left", "letterSpacing", "lineHeight", "listStyle", "listStyleImage", "listStylePosition", "listStyleType", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "markerOffset", "marks", "maxHeight", "maxWidth", "minHeight", "minWidth", "orphans", "outline", "outlineColor", "outlineStyle", "outlineWidth", "overflow", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "page", "pageBreakAfter", "pageBreakBefore", "pageBreakInside", "pause", "pauseAfter", "pauseBefore", "pitch", "pitchRange", "position", "quotes", "richness", "right", "size", "speak", "speakHeader", "speakNumeral", "speakPunctuation", "speechRate", "stress", "tableLayout", "textAlign", "textDecoration", "textIndent", "textShadow", "textTransform", "top", "unicodeBidi", "verticalAlign", "visibility", "voiceFamily", "volume", "whiteSpace", "widows", "width", "wordSpacing", "zIndex", "MozAppearance", "MozBackgroundClip", "MozBackgroundInlinePolicy", "MozBackgroundOrigin", "MozBinding", "MozBorderBottomColors", "MozBorderLeftColors", "MozBorderRightColors", "MozBorderTopColors", "MozBorderRadius", "MozBorderRadiusTopleft", "MozBorderRadiusTopright", "MozBorderRadiusBottomleft", "MozBorderRadiusBottomright", "MozBoxAlign", "MozBoxDirection", "MozBoxFlex", "MozBoxOrient", "MozBoxOrdinalGroup", "MozBoxPack", "MozBoxSizing", "MozColumnCount", "MozColumnWidth", "MozColumnGap", "MozFloatEdge", "MozForceBrokenImageIcon", "MozImageRegion", "MozMarginEnd", "MozMarginStart", "MozOpacity", "MozOutline", "MozOutlineColor", "MozOutlineRadius", "MozOutlineRadiusTopleft", "MozOutlineRadiusTopright", "MozOutlineRadiusBottomleft", "MozOutlineRadiusBottomright", "MozOutlineStyle", "MozOutlineWidth", "MozOutlineOffset", "MozPaddingEnd", "MozPaddingStart", "MozUserFocus", "MozUserInput", "MozUserModify", "MozUserSelect", "opacity", "outlineOffset", "overflowX", "overflowY", "imeMode", "MozBorderEnd", "MozBorderEndColor", "MozBorderEndStyle", "MozBorderEndWidth", "MozBorderStart", "MozBorderStartColor", "MozBorderStartStyle", "MozBorderStartWidth"]

Open in new window

0
 
jmarkfoleyAuthor Commented:
Hmmm, well I don't use Prototype, and I wasn't really looking for that kind of a learning curve. I could probably more easily create a javascript function that creates a string of the half-dozen or so attributes I care about (font, color, weight, decoration, height, border, margin padding ...). I was hoping perhaps there was an easy  myelement.style.value -like thing I could do (tried that one). No?
0
 
Richard QuadlingSenior Software DeveloperCommented:
Style, as you can see, is a MASSIVE object.

Each browser will have a different list also.

In FireFox I got  189 elements. Ok a few are duff, but still, a LOT.

If you only want a few, then maybe something like (again prototype.js) ...

$W('font color weight decoration height border margin padding').each(....)
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
szewkamConnect With a Mentor Commented:
I suggest using jQuery instead of prototype ;). Try script below
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<span id="test" style="margin: 10px 15px; font-weight: bold; color: blue;">Lorem ipsum</span>
<input type="button" value="Check styles" onclick="alert($('#test').attr('style'));" />
</body>
</html>

Open in new window

0
 
Richard QuadlingSenior Software DeveloperCommented:
That will only retrieve the style attribute for the element, not the element's style. Very different things.

If the style is defined via CSS, then attr('style') won't work.

The prototype's route woult be ...

$('test').readAttribute('style');
0
 
szewkamCommented:
of course you're right, my mistake :)
0
 
jmarkfoleyAuthor Commented:
Thanks guys, but I think I'll pass on using prototype or jquery. For now, I just use explicitly query the attributes I want.
0
All Courses

From novice to tech pro — start learning today.