HTML and CSS Reference
In-Depth Information
Combining transformations
Transformations individually lend great flexibility to what you can accomplish by changing
the appearance of HTML elements, but the transform style isn't limited to specifying a single
transformation method. You can combine the methods to apply multiple effects to the ele-
ment. In the sample code, change the
transform
property to the following code:
transform: translate(50px,0px) scale(1.5) skew(10deg, 10deg);
In this code, three effects are applied. Order matters. The effects are applied in the order
that they are specified in the
transform
property. In this case, the
translate
property is applied
first, and then the translated object is scaled. Finally, the resulting object is skewed. The effect
on the HTML element is that it is moved 50 pixels along the x-axis, scaled by 50 percent, and
then skewed 10 degrees.
You can show and hide elements declaratively in the HTML markup or programmatically by
modifying the object's CSS properties through JavaScript. You can create the CSS properties
that show or hide an element directly in an object's
style
property or in a CSS style, and it is
added to the element's style collection. This section's examples use the code from Listing 1-2,
updated as follows:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
…
<script>
window.onload = function () {
document.getElementById("btnHideAnElement").onclick = function () {
if (document.getElementById("innerDiv").style.display == 'inline') {
document.getElementById("innerDiv").style.display = 'none';
}
else {
document.getElementById("innerDiv").style.display = 'inline';
}
}
}
</script>
…
<button type="button" id="btnHideAnElement" >Show/Hide Element</button>
</form>
</body>
</html>
This code modifies the script block and adds a new button to the bottom of the page. The
button is connected to an onclick event after the window finishes loading. In this event, you
modify programmatically the visibility of the HTML elements.
The
innerDiv
element defaults to
hidden
when the page is loaded. When the button is
clicked, the code evaluates the state of the
display
CSS property to determine whether the
element is now visible or hidden. Depending on the result, the property is toggled. The
Search WWH ::
Custom Search