Solved

Can I get a string of all style attributes?

Posted on 2009-07-04
7
234 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:
RQuadling 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:RQuadling
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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:RQuadling
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

863 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now