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
MarkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Richard QuadlingSenior 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MarkAuthor 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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

szewkamCommented:
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
MarkAuthor 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.