JavaScript DHTML/HTML/HTML Style
Содержание
Change html style
<source lang="html4strict">
<HTML> <HEAD> <TITLE>applyElement() Method</TITLE> <SCRIPT LANGUAGE="JavaScript"> function applyOutside() {
var newItem = document.createElement("EM")
newItem.id = newItem.uniqueID
document.all.mySpan.applyElement(newItem)
} function applyInside() {
var newItem = document.createElement("EM")
newItem.id = newItem.uniqueID
document.all.mySpan.applyElement(newItem, "inside")
} function showHTML() {
alert(document.all.myP.outerHTML)
} </SCRIPT> </HEAD> <BODY>
applyElement() Method
A simple paragraph with a special word in it.
<FORM> <INPUT TYPE="button" VALUE="Apply Outside" onClick="applyOutside()"> <INPUT TYPE="button" VALUE="Apply Inside" onClick="applyInside()">
<INPUT TYPE="button" VALUE="Show HTML..." onClick="showHTML()">
<INPUT TYPE="button" VALUE="Restore Paragraph" onClick="location.reload()">
</BODY>
</HTML>
</source>
Change the Text style Properties
<source lang="html4strict">
<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="Article the First" SIZE=55>
<INPUT TYPE="button" VALUE="Change Heading HTML"
onClick="setGroupLabelAsHTML(this.form)">
<INPUT TYPE="text" NAME="textInput" VALUE="Article the First" SIZE=55> <INPUT TYPE="button" VALUE="Change Heading Text" onClick="setGroupLabelAsText(this.form)">
</FORM>
ARTICLE I
text
</BODY> </HTML>
</source>
Dynamically Updating Styles Using DHTML
<source lang="html4strict">
/* Mastering JavaScript, Premium Edition by James Jaworski ISBN:078212819X Publisher Sybex CopyRight 2001
- /
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY onload="initialize()"> <FORM> <INPUT TYPE="BUTTON" VALUE="Apply DHTML Style"
onClick="applyDHTML()">
</FORM>
</BODY> </HTML>
</source>
"EM" and "P" element
<source lang="html4strict">
var elem = document.createElement("p"); var txt = document.createTextNode("My dog has fleas."); elem.appendChild(txt); document.body.appendChild(elem);
var myEm, myP, txt1, txt2; myEm = document.createElement("em"); txt1 = document.createTextNode("very"); myEm .appendChild(txt1); myP = document.createElement("p"); txt1 = document.createTextNode("I am "); txt2 = document.createTextNode(" happy to see you."); myP.appendChild(txt1); myP.appendChild(myEm); myP.appendChild(txt2); document.body.appendChild(myP);
</source>
Get Element style
<source lang="html4strict">
function getElementStyle(elemID, IEStyleAttr, CSSStyleAttr) {
var elem = document.getElementById(elemID);
if (elem.currentStyle) {
return elem.currentStyle[IEStyleAttr];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, "");
return compStyle.getPropertyValue(CSSStyleAttr);
}
return "";
}
</source>
Make text bold by replaces it in the tree with an Element node
<source lang="html4strict">
/* Examples From JavaScript: The Definitive Guide, Fourth Edition Legal matters: these files were created by David Flanagan, and are Copyright (c) 2001 by David Flanagan. You may use, study, modify, and distribute them for any purpose. Please note that these examples are provided "as-is" and come with no warranty of any kind. David Flanagan
- /
<html> <script> // This function takes a node n, replaces it in the tree with an Element node // that represents an html tag, and then makes the original node the // child of the new <b> element. function embolden(node) {
var bold = document.createElement("b"); // Create a new <b> Element
var parent = node.parentNode; // Get the parent of node
parent.replaceChild(bold, node); // Replace node with the <b> tag
bold.appendChild(node); // Make node a child of the <b> tag
} </SCRIPT>
This is paragraph #1.
This is paragraph #2.
<button onclick="embolden(document.getElementById("p1"));">Embolden</button> </html>
</source>
Paragraph Style
<source lang="html4strict">
<html> <head> <title>Free Range Class</title> <style type="text/css"> p {font-size:14px; margin-left:2em; margin-right:2em} p.narrow {color:red; margin-left:5em; margin-right:5em} .hot {color:red; text-decoration:underline} body {font-family:Arial, sans-serif} </style> </head> <body>
Get a Load of This!
This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph.
This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color.
This is a normal paragraph. This is a normal paragraph but with a red-hot spot. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph.
This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color.
</body> </html>
</source>
Reading the canHaveChildren Property
<source lang="html4strict">
/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001
- /
<HTML> <HEAD> <TITLE>canHaveChildren Property</TITLE> <SCRIPT LANGUAGE="JavaScript"> function colorAll() {
for (var i = 0; i < document.all.length; i++) {
document.all[i].style.color = "red"
}
} function colorChildBearing() {
for (var i = 0; i < document.all.length; i++) {
if (document.all[i].canHaveChildren) {
document.all[i].style.color = "red"
}
}
} </SCRIPT> </HEAD> <BODY>
canHaveChildren Property Lab
<FORM NAME="input">
<INPUT TYPE="button" VALUE="Color All Elements" onClick="colorAll()">
<INPUT TYPE="button" VALUE="Reset" onClick="history.go(0)">
<INPUT TYPE="button" VALUE="Color Only Elements That Can Have Children" onClick="colorChildBearing()">
</FORM>
<FORM NAME="output"> <INPUT TYPE="checkbox" CHECKED>Your basic checkbox
<INPUT TYPE="text" NAME="access2" VALUE="Some textbox text.">
</FORM>
| Quantity | Description | Price |
|---|---|---|
| 4 | Primary Widget | $14.96 |
| 10 | Secondary Widget | $114.96 |
</BODY> </HTML>
</source>
Using document create Style Sheet
<source lang="html4strict">
<HTML> <HEAD> <TITLE>document.createStyleSheet() Method</TITLE> <SCRIPT LANGUAGE="JavaScript"> function addStyle1() {
var newStyle = document.createStyleSheet()
newStyle.addRule("P", "font-size:26pt; color:red")
} function addStyle2() {
var newStyle = document.createStyleSheet("lst18-13.css",0)
} </SCRIPT> </HEAD> <BODY>
document.createStyleSheet() Method
<FORM> <INPUT TYPE="button" VALUE="Add Internal" onClick="addStyle1()"> <INPUT TYPE="button" VALUE="Add External" onClick="addStyle2()"> </FORM>
Section 1
section 1.
Section 2
section2.
</BODY> </HTML>
</source>
Using getBoundingClientRect()
<source lang="html4strict">
/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001
- /
<HTML> <HEAD> <TITLE>getClientRects() and getBoundClientRect() Methods</TITLE> <SCRIPT LANGUAGE="JavaScript"> function hilite() {
var hTop, hLeft, hRight, hBottom, hWidth
var select = document.forms[0].choice
var n = parseInt(select.options[select.selectedIndex].value) - 1
var clientRects = document.all.main.getClientRects()
var mainElem = document.all.main
if (n >= 0 && n < clientRects.length) {
if (document.forms[0].fullWidth.checked) {
hLeft = mainElem.getBoundingClientRect().left
hRight = mainElem.getBoundingClientRect().right
} else {
hLeft = clientRects[n].left
hRight = clientRects[n].right
}
document.all.hiliter.style.pixelTop = clientRects[n].top +
document.body.scrollTop
document.all.hiliter.style.pixelBottom = clientRects[n].bottom
document.all.hiliter.style.pixelLeft = hLeft + document.body.scrollLeft
document.all.hiliter.style.pixelWidth = hRight - hLeft
document.all.hiliter.style.visibility = "visible"
} else if (n > 0) {
alert("The content does not have that many lines.")
document.all.hiliter.style.visibility = "hidden"
}
} </SCRIPT> </HEAD> <BODY onResize="hilite()">
getClientRects() and getBoundClientRect() Methods
<FORM>
Choose a line to highlight:
<SELECT NAME="choice" onChange="hilite()">
<OPTION VALUE=0>
<OPTION VALUE=1>1
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
<OPTION VALUE=10>10
<OPTION VALUE=11>11
<OPTION VALUE=12>12
<OPTION VALUE=13>13
<OPTION VALUE=14>14
<OPTION VALUE=15>15
</SELECT>
<INPUT NAME="fullWidth" TYPE="checkbox" onClick="hilite()">
Full Width (bounding rectangle)
</FORM>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco:
- laboris
- nisi
- aliquip ex ea commodo
Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseruntmollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.
</BODY> </HTML>
</source>
