Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Can I get a string of all style attributes?

Posted on 2009-07-04
7
Medium Priority
?
243 Views
Last Modified: 2012-05-07
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.
0
Comment
Question by:jmarkfoley
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 40

Accepted Solution

by:
Richard Quadling earned 1200 total points
ID: 24778347
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
 
LVL 1

Author Comment

by:jmarkfoley
ID: 24778366
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
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 24778377
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 7

Assisted Solution

by:szewkam
szewkam earned 300 total points
ID: 24779159
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
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 24779297
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
 
LVL 7

Expert Comment

by:szewkam
ID: 24779502
of course you're right, my mistake :)
0
 
LVL 1

Author Closing Comment

by:jmarkfoley
ID: 31599838
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question