In my last post, I addressed the myriad of devices and experiences that are available to users. This is a “piggy-back” on that post.
When we develop web applications, we always work with what I like to call the “three-legged stool”…namely HTML, CSS and JavaScript. They are all important and a developer must know them well and how they work together. When a developer is building interactivity, one of the ‘cool’ things we can do is to hook into css. JavaScript frameworks, such as jQuery, make this a piece of cake, but we can do it with raw JavaScript as well. Here is an example of accessing the stylings of an image…
[code lang=”js”]
// Create variables to access an images style properties via the dom
var imageHeight = document.getElementByID(“someID”).style.height;
var imageWidth = document.getElementByID(“someID”).style.width;
[/code]
Note: In this particular example, you would not have to manipulate both properties. If you manipulate one, the other should alter with it. If you do alter both, be cognizant of aspect ratios.
So, as you can see from the above example, we can access the stylings of an element and do with it what we will.
Side Note: One other thing to keep in mind when working with images is to make sure you utilize an image that is of a good enough quality where it looks good on both mobile and desktop. There are methods to deliver differing optimized images, but that is for another post.
Here is a listing of available styles…
| alignContent | Sets or returns the alignment between the lines inside a flexible container when the items do not use all available space |
| alignItems | Sets or returns the alignment for items inside a flexible container |
| alignSelf | Sets or returns the alignment for selected items inside a flexible container |
| animation | A shorthand property for all the animation properties below, except the animationPlayState property |
| animationDelay | Sets or returns when the animation will start |
| animationDirection | Sets or returns whether or not the animation should play in reverse on alternate cycles |
| animationDuration | Sets or returns how many seconds or milliseconds an animation takes to complete one cycle |
| animationFillMode | Sets or returns what values are applied by the animation outside the time it is executing |
| animationIterationCount | Sets or returns the number of times an animation should be played |
| animationName | Sets or returns a name for the @keyframes animation |
| animationTimingFunction | Sets or returns the speed curve of the animation |
| animationPlayState | Sets or returns whether the animation is running or paused |
| background | Sets or returns all the background properties in one declaration |
| backgroundAttachment | Sets or returns whether a background-image is fixed or scrolls with the page |
| backgroundColor | Sets or returns the background-color of an element |
| backgroundImage | Sets or returns the background-image for an element |
| backgroundPosition | Sets or returns the starting position of a background-image |
| backgroundRepeat | Sets or returns how to repeat (tile) a background-image |
| backgroundClip | Sets or returns the painting area of the background |
| backgroundOrigin | Sets or returns the positioning area of the background images |
| backgroundSize | Sets or returns the size of the background image |
| backfaceVisibility | Sets or returns whether or not an element should be visible when not facing the screen |
| border | Sets or returns borderWidth, borderStyle, and borderColor in one declaration |
| borderBottom | Sets or returns all the borderBottom* properties in one declaration |
| borderBottomColor | Sets or returns the color of the bottom border |
| borderBottomLeftRadius | Sets or returns the shape of the border of the bottom-left corner |
| borderBottomRightRadius | Sets or returns the shape of the border of the bottom-right corner |
| borderBottomStyle | Sets or returns the style of the bottom border |
| borderBottomWidth | Sets or returns the width of the bottom border |
| borderCollapse | Sets or returns whether the table border should be collapsed into a single border, or not |
| borderColor | Sets or returns the color of an element’s border (can have up to four values) |
| borderImage | A shorthand property for setting or returning all the borderImage* properties |
| borderImageOutset | Sets or returns the amount by which the border image area extends beyond the border box |
| borderImageRepeat | Sets or returns whether the image-border should be repeated, rounded or stretched |
| borderImageSlice | Sets or returns the inward offsets of the image-border |
| borderImageSource | Sets or returns the image to be used as a border |
| borderImageWidth | Sets or returns the widths of the image-border |
| borderLeft | Sets or returns all the borderLeft* properties in one declaration |
| borderLeftColor | Sets or returns the color of the left border |
| borderLeftStyle | Sets or returns the style of the left border |
| borderLeftWidth | Sets or returns the width of the left border |
| borderRadius | A shorthand property for setting or returning all the four border*Radius properties |
| borderRight | Sets or returns all the borderRight* properties in one declaration |
| borderRightColor | Sets or returns the color of the right border |
| borderRightStyle | Sets or returns the style of the right border |
| borderRightWidth | Sets or returns the width of the right border |
| borderSpacing | Sets or returns the space between cells in a table |
| borderStyle | Sets or returns the style of an element’s border (can have up to four values) |
| borderTop | Sets or returns all the borderTop* properties in one declaration |
| borderTopColor | Sets or returns the color of the top border |
| borderTopLeftRadius | Sets or returns the shape of the border of the top-left corner |
| borderTopRightRadius | Sets or returns the shape of the border of the top-right corner |
| borderTopStyle | Sets or returns the style of the top border |
| borderTopWidth | Sets or returns the width of the top border |
| borderWidth | Sets or returns the width of an element’s border (can have up to four values) |
| bottom | Sets or returns the bottom position of a positioned element |
| boxDecorationBreak | Sets or returns the behaviour of the background and border of an element at page-break, or, for in-line elements, at line-break. |
| boxShadow | Attaches one or more drop-shadows to the box |
| boxSizing | Allows you to define certain elements to fit an area in a certain way |
| captionSide | Sets or returns the position of the table caption |
| clear | Sets or returns the position of the element relative to floating objects |
| clip | Sets or returns which part of a positioned element is visible |
| color | Sets or returns the color of the text |
| columnCount | Sets or returns the number of columns an element should be divided into |
| columnFill | Sets or returns how to fill columns |
| columnGap | Sets or returns the gap between the columns |
| columnRule | A shorthand property for setting or returning all the columnRule* properties |
| columnRuleColor | Sets or returns the color of the rule between columns |
| columnRuleStyle | Sets or returns the style of the rule between columns |
| columnRuleWidth | Sets or returns the width of the rule between columns |
| columns | A shorthand property for setting or returning columnWidth and columnCount |
| columnSpan | Sets or returns how many columns an element should span across |
| columnWidth | Sets or returns the width of the columns |
| content | Used with the :before and :after pseudo-elements, to insert generated content |
| counterIncrement | Increments one or more counters |
| counterReset | Creates or resets one or more counters |
| cursor | Sets or returns the type of cursor to display for the mouse pointer |
| direction | Sets or returns the text direction |
| display | Sets or returns an element’s display type |
| emptyCells | Sets or returns whether to show the border and background of empty cells, or not |
| flex | Sets or returns the length of the item, relative to the rest |
| flexBasis | Sets or returns the initial length of a flexible item |
| flexDirection | Sets or returns the direction of the flexible items |
| flexFlow | A shorthand property for the flexDirection and the flexWrap properties |
| flexGrow | Sets or returns how much the item will grow relative to the rest |
| flexShrink | Sets or returns how the item will shrink relative to the rest |
| flexWrap | Sets or returns whether the flexible items should wrap or not |
| cssFloat | Sets or returns the horizontal alignment of an element |
| font | Sets or returns fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily in one declaration |
| fontFamily | Sets or returns the font family for text |
| fontSize | Sets or returns the font size of the text |
| fontStyle | Sets or returns whether the style of the font is normal, italic or oblique |
| fontVariant | Sets or returns whether the font should be displayed in small capital letters |
| fontWeight | Sets or returns the boldness of the font |
| fontSizeAdjust | Preserves the readability of text when font fallback occurs |
| fontStretch | Selects a normal, condensed, or expanded face from a font family |
| hangingPunctuation | Specifies whether a punctuation character may be placed outside the line box |
| height | Sets or returns the height of an element |
| hyphens | Sets how to split words to improve the layout of paragraphs |
| icon | Provides the author the ability to style an element with an iconic equivalent |
| imageOrientation | Specifies a rotation in the right or clockwise direction that a user agent applies to an image |
| justifyContent | Sets or returns the alignment between the items inside a flexible container when the items do not use all available space. |
| left | Sets or returns the left position of a positioned element |
| letterSpacing | Sets or returns the space between characters in a text |
| lineHeight | Sets or returns the distance between lines in a text |
| listStyle | Sets or returns listStyleImage, listStylePosition, and listStyleType in one declaration |
| listStyleImage | Sets or returns an image as the list-item marker |
| listStylePosition | Sets or returns the position of the list-item marker |
| listStyleType | Sets or returns the list-item marker type |
| margin | Sets or returns the margins of an element (can have up to four values) |
| marginBottom | Sets or returns the bottom margin of an element |
| marginLeft | Sets or returns the left margin of an element |
| marginRight | Sets or returns the right margin of an element |
| marginTop | Sets or returns the top margin of an element |
| maxHeight | Sets or returns the maximum height of an element |
| maxWidth | Sets or returns the maximum width of an element |
| minHeight | Sets or returns the minimum height of an element |
| minWidth | Sets or returns the minimum width of an element |
| navDown | Sets or returns where to navigate when using the arrow-down navigation key |
| navIndex | Sets or returns the tabbing order for an element |
| navLeft | Sets or returns where to navigate when using the arrow-left navigation key |
| navRight | Sets or returns where to navigate when using the arrow-right navigation key |
| navUp | Sets or returns where to navigate when using the arrow-up navigation key |
| opacity | Sets or returns the opacity level for an element |
| order | Sets or returns the order of the flexible item, relative to the rest |
| orphans | Sets or returns the minimum number of lines for an element that must be left at the bottom of a page when a page break occurs inside an element |
| outline | Sets or returns all the outline properties in one declaration |
| outlineColor | Sets or returns the color of the outline around a element |
| outlineOffset | Offsets an outline, and draws it beyond the border edge |
| outlineStyle | Sets or returns the style of the outline around an element |
| outlineWidth | Sets or returns the width of the outline around an element |
| overflow | Sets or returns what to do with content that renders outside the element box |
| overflowX | Specifies what to do with the left/right edges of the content, if it overflows the element’s content area |
| overflowY | Specifies what to do with the top/bottom edges of the content, if it overflows the element’s content area |
| padding | Sets or returns the padding of an element (can have up to four values) |
| paddingBottom | Sets or returns the bottom padding of an element |
| paddingLeft | Sets or returns the left padding of an element |
| paddingRight | Sets or returns the right padding of an element |
| paddingTop | Sets or returns the top padding of an element |
| pageBreakAfter | Sets or returns the page-break behavior after an element |
| pageBreakBefore | Sets or returns the page-break behavior before an element |
| pageBreakInside | Sets or returns the page-break behavior inside an element |
| perspective | Sets or returns the perspective on how 3D elements are viewed |
| perspectiveOrigin | Sets or returns the bottom position of 3D elements |
| position | Sets or returns the type of positioning method used for an element (static, relative, absolute or fixed) |
| quotes | Sets or returns the type of quotation marks for embedded quotations |
| resize | Sets or returns whether or not an element is resizable by the user |
| right | Sets or returns the right position of a positioned element |
| tableLayout | Sets or returns the way to lay out table cells, rows, and columns |
| tabSize | Sets or returns the length of the tab-character |
| textAlign | Sets or returns the horizontal alignment of text |
| textAlignLast | Sets or returns how the last line of a block or a line right before a forced line break is aligned when text-align is “justify” |
| textDecoration | Sets or returns the decoration of a text |
| textDecorationColor | Sets or returns the color of the text-decoration |
| textDecorationLine | Sets or returns the type of line in a text-decoration |
| textDecorationStyle | Sets or returns the style of the line in a text decoration |
| textIndent | Sets or returns the indentation of the first line of text |
| textJustify | Sets or returns the justification method used when text-align is “justify” |
| textOverflow | Sets or returns what should happen when text overflows the containing element |
| textShadow | Sets or returns the shadow effect of a text |
| textTransform | Sets or returns the capitalization of a text |
| top | Sets or returns the top position of a positioned element |
| transform | Applies a 2D or 3D transformation to an element |
| transformOrigin | Sets or returns the position of transformed elements |
| transformStyle | Sets or returns how nested elements are rendered in 3D space |
| transition | A shorthand property for setting or returning the four transition properties |
| transitionProperty | Sets or returns the CSS property that the transition effect is for |
| transitionDuration | Sets or returns how many seconds or milliseconds a transition effect takes to complete |
| transitionTimingFunction | Sets or returns the speed curve of the transition effect |
| transitionDelay | Sets or returns when the transition effect will start |
| unicodeBidi | Sets or returns whether the text should be overridden to support multiple languages in the same document |
| verticalAlign | Sets or returns the vertical alignment of the content in an element |
| visibility | Sets or returns whether an element should be visible |
| whiteSpace | Sets or returns how to handle tabs, line breaks and whitespace in a text |
| width | Sets or returns the width of an element |
| wordBreak | Sets or returns line breaking rules for non-CJK scripts |
| wordSpacing | Sets or returns the spacing between words in a text |
| wordWrap | Allows long, unbreakable words to be broken and wrap to the next line |
| widows | Sets or returns the minimum number of lines for an element that must be visible at the top of a page |
| zIndex | Sets or returns the stack order of a positioned element |
Happy Coding!
Clay Hess
