reptile7's JavaScript blog
Sunday, June 26, 2005
Properties III: More on Text and Links
Blog Entry #14

The last entry was devoted largely to the document object's 'global' properties - by that I mean those properties that pertain to the document as a whole. However, it follows from our discussion of the document anchors, forms, and links properties that all of a document body's elements are also document properties*; indeed and relatedly, you may have noticed at JavaScript Kit's document object page a document "all" property, "an IE4+ exclusive array that contains all of the elements within the document". Moreover, our ability to access and style document body elements via the getElementById( ) method, which we discussed in Blog Entry #8, implies that these elements are document properties.

*April 2017 Update: To clarify, the individual elements of a document can all be accessed in a property-like way and they do constitute nodes of the document in a modern-day DOM sense, but they are not actually properties of the classical JavaScript document object.

We have also noted that document body elements can themselves be JavaScript objects, and it is their properties that we now address. Specifically, in this and the next entries we will go over some of the properties of the <body> elements that Weekend Silicon Warriors deal with most often when writing HTML: text, links, images, and forms.

Formatting text on the fly: the style object, revisited

OK, so we can change a document's text color via the document fgColor property. But of course, we here at reptile7's JavaScript blog aren't satisfied with that; we want to be able to change dynamically all of the basic font properties, including:
• font typeface (e.g., Arial, Courier New, Georgia, etc.)
• font size
• font style (bold, italics, underline)

While I'm on this topic, I should mention that the HTML <font> element - the classic tool for setting font typeface, size, and color - is now deprecated, as is the underlining <u> element. (The boldening <b> and italicizing <i> elements, however, are still acceptable.) Now, we're all supposed to set these things using style sheets, and CSS is in fact the key to setting them on the fly with JavaScript.

At this point, you are probably thinking to yourselves, "Well, then, we should be able to set font properties by using the getElementById( ) method and the JavaScript DOM style object and by applying the method that we followed in Blog Entry #8 for setting text background colors," and you would be spot on. Let's begin with an example, followed by its code, and then we can summarize.

The quick brown fox jumps over the lazy dog.

Click on the buttons below to style dynamically the sentence above.

The code for this is:
<span id="fox">The quick brown fox jumps over the lazy dog.</span><br>
Click on the buttons below to style dynamically the sentence above.<br>
<input type="button" value="Change the Font Typeface" onclick="document.getElementById('fox').style.fontFamily='verdana';"><br>
<input type="button" value="Double the Font Size" onclick="document.getElementById('fox').style.fontSize='24pt';"><br>
<input type="button" value="Bolden It" onclick="document.getElementById('fox').style.fontWeight='bold';"><br>
<input type="button" value="Italicize It" onclick="document.getElementById('fox').style.fontStyle='italic';"><br>
<input type="button" value="Underline It" onclick="document.getElementById('fox').style.textDecoration='underline';"><br>
<input type="button" value="Change Its Color" onclick="document.getElementById('fox').style.color='forestgreen';">

In summary, the general approach here is:
(1) Put the text to be formatted in a paragraph, span, or division element, i.e., surround it with opening and closing HTML <p>, <span>, or <div> tags.
(2) Put an id="whatever" attribute in the opening <p>, <span>, or <div> tag.
(3) Choose some other body element to 'trigger' the text formatting - I used a form button, but any element will do.**
(4) Add an onClick or onMouseOver event handler to the opening HTML tag of the triggering element; to onClick or onMouseOver, assign the following general command:

document.getElementById('whatever').style.fontProperty='suitable_value'; (where fontProperty is fontFamily, fontStyle, fontSize, etc.)

in which document.getElementById('whatever') references the text element whose style/CSS attribute we are changing.

(**Yes, I realize that we can use the text element itself to trigger the formatting by putting the onclick/onmouseover attribute directly in the <p>, <span>, or <div> tag, but I prefer the 'remote control' method outlined above.)

In the name of completeness, I should bring to your attention that JavaScript also has string formatting methods that can be used to style text. For example:

document.write( ("The rain in Spain falls mainly on the plain.").italics( ) );

The rain in Spain falls mainly on the plain.

Link properties

As noted at DevGuru's Link object page, Link objects are Location objects and have the same properties as do Location objects, so it is fitting, in light of the brief treatment of Location object properties in HTML Goodies' JavaScript Primers #7, that we discuss Link object properties here.

OK, so we can change the color of unvisited links, active links, and visited links via the document linkColor, alinkColor, and vlinkColor properties, respectively. But it gets more interesting than that. HTML Goodies' JavaScript Objects Keyword Reference page tells us that "the Link object can also be used to define new links". To see how we can do this, let's first look at the anatomy of a hyperlink, which in most cases can be generalized as:

<a href="protocol//hostname/pathname">link text</a>

in which protocol, hostname, and pathname are properties of the Link object and represent the constituent parts of the target anchor URL. (A more complete URL anatomy appears at DevGuru's Link object page.)

Let's suppose that you author a Web page on which the first document link is:

<a href="">Click here to read The Story of Blogger.</a>

document.links[0].protocol will return:  http:
document.links[0].hostname will return:
document.links[0].pathname will return:  /about
document.links[0].href, which we discussed at the end of Blog Entry #13, will return:

OK, so we can read these properties. But I find that hostname, pathname, and href are all writable properties, and it wouldn't surprise me if the other URL-related Link properties (protocol, host, etc.) can be written as well. Let's illustrate with a couple of examples, shall we?

(1) Writing the hostname property

Do you prefer the Yahoo! or Google search engine? Indicate your choice by clicking on the appropriate button below.
Follow this link to your preferred search engine.

The code for this is:
Do you prefer the Yahoo! or Google search engine? Indicate your choice by clicking on the appropriate button below.<br>
<input type="button" value="Yahoo!" onclick="document.getElementById('presea').hostname='';">
<input type="button" value="Google" onclick="document.getElementById('presea').hostname='';">
<a href="http://" id="presea">Follow this link to your preferred search engine.</a>

(Due to the large and varying number of links on this page, it's much easier to access the link above by a document.getElementById('linkID') reference than by a document.links[i] reference.)

(2) Writing the pathname property

Which section of CNN interests you most? Indicate your choice by clicking on the appropriate button below.
Follow this link to your preferred CNN section.

The code for this is:
Which section of CNN interests you most? Indicate your choice by clicking on the appropriate button below.<br>
<input type="button" value="Politics" onclick="document.getElementById('precnn').pathname='/POLITICS/';">
<input type="button" value="Health" onclick="document.getElementById('precnn').pathname='/HEALTH/';">
<input type="button" value="Law" onclick="document.getElementById('precnn').pathname='/LAW/';">
<input type="button" value="Education" onclick="document.getElementById('precnn').pathname='/EDUCATION/';">
<a href="" id="precnn">Follow this link to your preferred CNN section.</a>

The Link href property can be set dynamically in an analogous manner.

Finally, DevGuru lists two non-URL-related link properties, target and text.

The target property names the window in which a clicked link (more precisely, the target anchor to which the link points) opens. If you were to code n documents and display them in separate windows - we'll discuss the opening of new windows with JavaScript in Primer #11 - or if your n documents are loaded into a collection of frames constituting the current window, then a link in one window/frame can be targeted to any of the other windows/frames via a target="window_or_frame_name" attribute in the link's <a> tag. (Joe discusses the targeting of links in frames here.) According to DevGuru's Link target property page, the target property is read/write, i.e., a command can either return the value of a preset target attribute or set a new target for a given link.

The text property refers to the Link object text that appears between the opening and closing anchor tags. The Link text property is not supported by MSIE, as noted by IRT (somewhat confusingly, IRT conflates the Link and Anchor objects on a single Anchor object page), and is read-only (or at least my attempts to write it were unsuccessful). BTW, for a link containing an image

<a href=""><img src="some_image.gif"></a>

the link_reference.text return is blank.

We'll discuss the properties of Image and Form objects in the next entry.


Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)