Change the Text style Properties : HTML Style « HTML « JavaScript DHTML






  1. JavaScript DHTML
  2. HTML
  3. HTML Style

Change the Text style Properties


<HTML>
<HEAD>
<TITLE>outerHTML and outerText Properties</TITLE>
<STYLE TYPE="text/css">
H1 {font-size:18pt; 
    font-weight:bold; 
    font-family:"Comic Sans MS", Arial, sans-serif
}
.heading {
    font-size:20pt; 
    font-weight:bold; 
    font-family:"Arial Black", Arial, sans-serif}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function setGroupLabelAsText(form) {
    var content = form.textInput.value
    if (content) {
        document.all.label1.outerText = content
    }
}
function setGroupLabelAsHTML(form) {
    var content = form.HTMLInput.value
    if (content) {
        document.all.label1.outerHTML = content
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<P>
    <INPUT TYPE="text" NAME="HTMLInput" 
    VALUE="<SPAN ID='label1' CLASS='heading'>Article the First</SPAN>" SIZE=55>
    <INPUT TYPE="button" VALUE="Change Heading HTML" 
    onClick="setGroupLabelAsHTML(this.form)">
</P>
<P>
    <INPUT TYPE="text" NAME="textInput" 
    VALUE="<SPAN ID='label1' CLASS='heading'>Article the First</SPAN>" SIZE=55>
    <INPUT TYPE="button" VALUE="Change Heading Text" 
    onClick="setGroupLabelAsText(this.form)">
</P>
</FORM>
<H1 ID="label1">ARTICLE I</H1>
<P>
text
</P>
</BODY>
</HTML>








Related examples in the same category

1.Paragraph Style
2.Make text bold by replaces it in the tree with an Element node
3.Using document create Style Sheet
4.Reading the canHaveChildren Property
5.Change html style
6.Using getBoundingClientRect()
7. Dynamically Updating Styles Using DHTML
8.Get Element style
9.'EM' and 'P' element