Sunday, June 26, 2005
Properties III: More on Text and Links
Blog Entry #14
Formatting text on the fly: the style object, revisited
• font typeface (e.g., Arial, Courier New, Georgia, etc.)
• font size
• font style (bold, italics, underline)
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.)
document.write( ("The rain in Spain falls mainly on the plain.").italics( ) );
The rain in Spain falls mainly on the plain.
<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="http://www.blogger.com/about">Click here to read The Story of Blogger.</a>
document.links.protocol will return: http:
document.links.hostname will return: www.blogger.com
document.links.pathname will return: /about
document.links.href, which we discussed at the end of Blog Entry #13, will return: http://www.blogger.com/about
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='www.yahoo.com';">
<input type="button" value="Google" onclick="document.getElementById('presea').hostname='www.google.com';">
<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="http://www.cnn.com" 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 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="http://www.some_web_page.com"><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.