Microsoft 70-480: Apply styling to HTML elements programmatically

Exam Objectives

Change the location of an element; apply a transform; show and hide elements

Quick Overview of Training Materials

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 4

Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 1 (part 2)
HTML.net Positioning Tutorial
Stackoverflow - Changing an elements location in DOM
CSS3 Transforms spec from w3c.org
CSS from w3schools.com - I know, ugh, but hey I used them...
CSSTricks.com - Display
CSSTricks.com - Float
Transform (Mozilla Dev Net)
CSSTricks.com - Transform

Interactive Demo with JSFiddle

The best way I could figure to learn this particular material (along with most of the other CSS stuff) is to see it in action.  The JSFiddle demo below allows you to manipulate a collection of <divs> with a wide array of CSS properties. And just a word of caution, I don't know if its JSFiddle or just my particular set up but this compleletly blew the hell out of IE10 when I tried running it in there, but the computer I was using was pretty old so, could be nothing...


Transforms were the trickiest to apply this way since they are not seperated. As a result, I had to get the current string value of  "transform", which had to be browser specific (I was using Chrome so I ended up with the webkit version), then I had to chop out a given transform if it was already in the string, THEN I could finally append the new tranform change to the end and apply it.  Here is a quick list of all the CSS properties this demo lets you play with:

• float: right or left
• clear: right, left, none, or both
• display:  none, block, inline, inline-block, table
• vertical-align: top, middle, bottom
• transition: all 0.5s, all 1s, all 3s
• visibility: hidden, visible
• position: fixed, relative, absolute
• top, left: -100 to 400 px
• height, : 10 to 160 px
• width: 10 to 160 px
• padding: 0 to 20 px
• margin: 0 to 40 px
• background-color: purple, yellow, cyan, fuchsia, antiquewhite, black
• opacity: 0 to 100%
• color (text): purple, yellow, cyan, fuchsia, antiquewhite, black
• font-family: sarif, sans-sarif, monospaced, cursive, impact
• font-size: 7 to 40 px
• border-color: purple, yellow, cyan, fuchsia, antiquewhite, black
• border-style: solid, dashed, dotted
• border-width: 0 to 10 px
• border-radius: 0 to 60 px
• text-shadow: 0 to 15 px for x offset, y offset, and blur, and typical color list
• box-shadow: same parameters as text-shadow
• transformations:
• Skew(X,Y): -40deg to 40 deg
• Rotate(X,Y,Z): -180 to 180 deg
• Translate(X,Y,Z): -100 to 400 px
• Scale(X,Y): -5 to 5 (factor)
• Perspective: -100 to 100 px

A word about the particulars of these objectives.

While we can never be certain with such terse objective descriptions, it seems that these point to:

• display - box-rendering behavior
• visibility - whether we can see it or not
• position - how an element is positioned
• transform - change the appearance without effecting box-rendering
• float - how elements flow around
• clear - avoiding a floated element

as the main points of interest, so I'll expand a bit on each of these properties.

The training guide covers position, float, and clear in Lesson 3 of Chapter 4.  Position can be either static (default), relative, absolute, or fixed.  Static positioning displays elements wherever they would normally appear in the document, and is generally only used to override other specified positioning.  Relative positioning offsets the element from wherever it would normally appear.  If surrounding elements are not also offset, it will give the appearance of a "hole" where the offset element would normally live.  Absolute positioning moves the element out of the normal flow of the document and positions it relative to it's containing element (as long as the containing element's position is not "static"). With absolute positioning, there is no "hole", the surrounding elements will flow as if  the absolute position element were not there. Finally, fixed positioning works similar to absolute, only the position is always relative to the browser window.

Float and clear can be used to manipulate where elements flow. When an element is floated, the elements that follow it will "flow" around it, much the way text in a newspaper articles flows around a photograph.  Float can only be applied horizontally, it is not possible to float vertically.  One this to note is that floating a series of elements can change their order. Notice how the red and green squares swap position below:

The "clear" property causes an element that would normally float next to a "floated" element to drop down below it instead.  In the above graphics, applying "clear: left" to all the elements in the float:left arrangment would result in them rearragning themselves as if there were no float at all (they would look like the first panel).  This is because the elements won't float to their left.  An example that CSSTricks points out is applying "clear" to a footer so that it won't get hung up on content columns. Floating the blue boxes right and applying "clear:right" to the red and green boxes has the effect of maintaining the spacing between the blue boxes:

The "display" property determines how an element is rendered.  While it is possible to change the rendering behavior, changing this attribute does not negate certain rules (inline elements cannot contain block elements, regardless of the value of "display").   

• inline : default for elements, <span>, <em>, etc.  Can accept padding and margin, but only push away horizontally.
• inline-block : similar to inline, except you can use width and hieght
• block : usually a container, like <p>, <h1>, <div>. They break out of inline flow, and use the maximum horizontal space by default.
• none :  effectively removes the element from the document (unlike visibility:hidden which leaves the element there just makes it invisible)

Finally, we have tranform.  Transform is still a work in progress and doesn't really have a standard implementation as yet. For my demo I had to use a -webkit prefix to make it work right.  Transform allows you to change the geometric presentation of elements using a number of transform-functions:

• skew - tilts an element along either the x or y axis
• rotate - rotate the element about any of the three axis. To rotate an otherwise untransformed element, use rotateZ.
• scale - makes an element larger or smaller according to a scale factor
• translate - moves an element around

Applying style with JavaScript

Since the title of this test objective category is "Apply styling... programmatically" I'm going to go out on a limb and assume it's important to know how to use JS to change the styling on an object. There are two ways of doing this:

First is using [element].setAttribute("property","value"). While this is pretty straight forward, it does have a significant drawback, in that any time you set this property, it overwrites the ENTIRE style element. So to do this with some finese you would have to copy the string, find the style property you want to change (if its there), take it out if you find it, then append the new styling to the end, and then FINALLY set the value of "style" to the new overall string. The only time I used this in the video was for my clearAll() function when I set it to "" and blitzed all the built up styling out of there. An easier way is to...

Use the properties of the style DOM object like this: [element].style.property=value. This gives you granular access to individual CSS properties, so no string parsing. It is worth noting, however, that transform does not have individual properties for each tranformation, so some string parsing is necessary if you are dynamically adding and taking away stuff (like in the above demo), or at the very least you need to perserve state data to track which individual transforms apply to a given element.