Solved

Can I get a string of all style attributes?

Posted on 2009-07-04
7
237 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
  • 3
  • 2
  • 2
7 Comments
 
LVL 40

Accepted Solution

by:
Richard Quadling earned 400 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 7

Assisted Solution

by:szewkam
szewkam earned 100 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
iOS 10 iPad Zoom and acroll 4 71
jquery add something to a div 4 43
Wordpress "chart" plugin recommendation 7 51
Width of Page is Affecting Side Menu 6 24
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

775 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