HTML and CSS Reference
In-Depth Information
marks the end of the document body. Clicking below the horizontal
rule will not have any efect. It is just extra space the browser put there
because the document is shorter than the browser window.
.
he window's width does not matter. he document will always occupy
the window's full width. A click will work anywhere above the rule,
except at the very edges of the page. his is because there is space
between the document's window and the body content. his space is
called
padding
.
.
he heading text does not change color when you click in the body. his
is due to the cascading nature of CSS. Child objects inherit properties
from their parents but can override and add to them. So, even though the
level-one heading is inside the document body, the heading text does not
change to red because a more speciic CSS rule takes precedence.
.
Ater the paragraph text changes to red, there's no going back for the
user, short of reloading the page. It is not that the change is permanent. It
is just because no behavior has been deined to allow users to go back to
the initial state.
he JavaScript code does not in any sense “live” in the space ater the docu-
ment body. Script elements can appear anywhere in an HTML document. In
Example 2.3, the script code must be placed ater the
body
element because
the browser executes scripts as they are encountered in the source code. It
would be an error to reference an object before it is fully deined. here are
other ways to accomplish this, including calling JavaScript functions within
the HTML code using special HTML event-handling attributes. Also, exter-
nal JavaScript libraries, such as jQuery, provide a means to execute functions
when the document is “ready”—that is, when all the DOM objects are fully
deined. his allows code to be placed apart from the HTML source. Without
going into the details of jQuery syntax, the equivalent jQuery code to deine
the body behavior of Example 2.3 would look like this:
<script type="text/javascript">
jQuery(document).ready( function () {
jQuery('body').click( function () {
jQuery('body').css('color', 'red');
});
});
</script>
