JavaScript DHTML/HTML/HTML Style
Содержание
- 1 Change html style
- 2 Change the Text style Properties
- 3 Dynamically Updating Styles Using DHTML
- 4 "EM" and "P" element
- 5 Get Element style
- 6 Make text bold by replaces it in the tree with an Element node
- 7 Paragraph Style
- 8 Reading the canHaveChildren Property
- 9 Using document create Style Sheet
- 10 Using getBoundingClientRect()
Change html style
<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>
<H1>applyElement() Method</H1>
<HR>
<P ID="myP">A simple paragraph with a <SPAN ID="mySpan">
<FONT SIZE=+1>special</FONT></SPAN> word in it.</P>
<FORM>
<INPUT TYPE="button" VALUE="Apply <EM> Outside" onClick="applyOutside()">
<INPUT TYPE="button" VALUE="Apply <EM> Inside" onClick="applyInside()">
<INPUT TYPE="button" VALUE="Show <P> HTML..." onClick="showHTML()"><BR>
<INPUT TYPE="button" VALUE="Restore Paragraph" onClick="location.reload()">
</BODY>
</HTML>
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>
Dynamically Updating Styles Using DHTML
/*
Mastering JavaScript, Premium Edition
by James Jaworski
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function initialize() {
state = 0
if(document.all && !document.getElementById) {
div0 = document.all["d0"]
div1 = document.all["d1"]
div2 = document.all["d2"]
browser = "ie4"
}else if(document.getElementById){
div0 = document.getElementById("d0")
div1 = document.getElementById("d1")
div2 = document.getElementById("d2")
browser = "dom1"
}else{
browser = "unknown"
return
}
divs = new Array(div0, div1, div2)
divStyles = new Array(div0.style, div1.style, div2.style)
}
function moveParagraphs() {
for(var i=0; i<divStyles.length; ++i) {
var x = Math.random()*400
var y = Math.random()*400
moveDivTo(i, x, y)
}
}
function moveDivTo(i, x, y) {
if(browser == "ie4") {
divStyles[i].posLeft = x
divStyles[i].posTop = y
}else if(browser == "dom1") {
divStyles[i].left = x
divStyles[i].top = y
}
}
function slideText(n) {
divStyles[n].visibility = "visible"
var max = (n+1)*100
for(var i=0;i<max;++i) {
setTimeout("moveDivTo("+n+","+i+","+max+")",500)
}
}
function italicize() {
divStyles[0].fontStyle = "italic"
divStyles[1].fontStyle = "italic"
divStyles[2].fontStyle = "italic"
}
function applyDHTML() {
if(browser == "unknown") {
alert("Sorry. Your browser does not provide sufficient DHTML support to run this example.")
return
}
switch(state) {
case 0:
divStyles[0].fontSize = "x-small"
divStyles[0].fontStyle = "italic"
divStyles[1].fontSize = "medium"
divStyles[1].fontVariant = "small-caps"
divStyles[2].fontSize = "x-large"
divStyles[2].fontFamily = "Courier"
break
case 1:
divStyles[0].backgroundColor = "cyan"
divStyles[0].color = "blue"
divStyles[1].backgroundColor = "green"
divStyles[1].color = "yellow"
divStyles[2].backgroundColor = "orange"
divStyles[2].color = "red"
break
case 2:
moveDivTo(0, 50, 300)
moveDivTo(1, 100, 200)
moveDivTo(2, 200, 100)
break
case 3:
interval = setInterval("moveParagraphs()",750)
break
case 4:
clearInterval(interval)
moveDivTo(0, 50, 100)
moveDivTo(1, 150, 100)
moveDivTo(2, 325, 100)
break
case 5:
divStyles[0].zIndex = 100
divStyles[0].width = 400
divStyles[0].height = 300
break
case 6:
divStyles[0].zIndex = 0
divStyles[1].zIndex = 100
divStyles[1].width = 400
divStyles[1].height = 300
break
case 7:
divStyles[1].zIndex = 1
divStyles[2].zIndex = 100
divStyles[2].width = 400
divStyles[2].height = 300
break
case 8:
for(var i=0;i<divStyles.length;++i) {
divStyles[i].fontFamily = "Times"
divStyles[i].fontSize = "xx-large"
divStyles[i].fontStyle = "normal"
divStyles[i].fontVariant = "normal"
}
moveDivTo(1, 150, 150)
moveDivTo(2, 325, 200)
break
case 9:
for(var i=0;i<divStyles.length;++i) {
divStyles[i].color = "black"
divStyles[i].backgroundColor = "white"
divStyles[i].visibility = "hidden"
moveDivTo(i, 0, (i+1)*100)
}
divs[0].innerHTML = "That"s"
divs[1].innerHTML = "All"
divs[2].innerHTML = "Folks!"
setTimeout("slideText(0)",500)
setTimeout("slideText(1)",1500)
setTimeout("slideText(2)",2500)
setTimeout("italicize()",5000)
break
case 10:
window.location.reload()
break
}
++state
}
//--></SCRIPT>
</HEAD>
<BODY onload="initialize()">
<FORM>
<INPUT TYPE="BUTTON" VALUE="Apply DHTML Style"
onClick="applyDHTML()">
</FORM>
<DIV ID="d0" STYLE="position:absolute; top:50px">Sample Text 1</DIV>
<DIV ID="d1" STYLE="position:absolute; top:100px">Sample Text 2</DIV>
<DIV ID="d2" STYLE="position:absolute; top:150px">Sample Text 3</DIV>
</BODY>
</HTML>
"EM" and "P" element
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);
Get Element style
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O"Reilly & Associates
Copyright 2003 Danny Goodman
-->
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 "";
}
Make text bold by replaces it in the tree with an Element node
/*
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 <b> 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>
<!-- A couple of sample paragraphs -->
<p id="p1">This <i>is</i> paragraph #1.</p>
<p id="p2">This <i>is</i> paragraph #2.</p>
<!-- A button that invokes the embolden() function on the first paragraph -->
<button onclick="embolden(document.getElementById("p1"));">Embolden</button>
</html>
Paragraph Style
<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>
<h1 class="hot">Get a Load of This!</h1>
<p>
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.
</p>
<div class="hot">
<p class="narrow">
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.
</p>
</div>
<p>
This is a normal paragraph. This is a normal paragraph <span class="hot">but with a
red-hot spot</span>. This is a normal paragraph. This is a normal paragraph. This
is a normal paragraph.
</p>
<p class="narrow">
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.
</p>
</body>
</html>
Reading the canHaveChildren Property
/*
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>
<H1>canHaveChildren Property Lab</H1>
<HR>
<FORM NAME="input">
<INPUT TYPE="button" VALUE="Color All Elements" onClick="colorAll()">
<BR>
<INPUT TYPE="button" VALUE="Reset" onClick="history.go(0)">
<BR>
<INPUT TYPE="button" VALUE="Color Only Elements That Can Have Children" onClick="colorChildBearing()">
</FORM>
<BR>
<HR>
<FORM NAME="output">
<INPUT TYPE="checkbox" CHECKED>Your basic checkbox
<P></P>
<INPUT TYPE="text" NAME="access2" VALUE="Some textbox text.">
<P></P>
</FORM>
<TABLE ID="myTable" CELLPADDING="10" BORDER=2>
<TR>
<TH>Quantity<TH>Description<TH>Price
</TR>
<TBODY>
<TR>
<TD WIDTH=100>4<TD>Primary Widget<TD>$14.96
</TR>
<TR>
<TD>10<TD>Secondary Widget<TD>$114.96
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Using document create Style Sheet
<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>
<H1>document.createStyleSheet() Method</H1>
<HR>
<FORM>
<INPUT TYPE="button" VALUE="Add Internal" onClick="addStyle1()">
<INPUT TYPE="button" VALUE="Add External" onClick="addStyle2()">
</FORM>
<H2>Section 1</H2>
<P>section 1.</P>
<H2>Section 2</H2>
<P>section2.</P>
</BODY>
</HTML>
Using getBoundingClientRect()
/*
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()">
<H1>getClientRects() and getBoundClientRect() Methods</H1>
<HR>
<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><BR>
<INPUT NAME="fullWidth" TYPE="checkbox" onClick="hilite()">
Full Width (bounding rectangle)
</FORM>
<SPAN ID="main">
<P>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:</P>
<UL>
<LI>laboris
<LI>nisi
<LI>aliquip ex ea commodo
</UL>
<P>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.</P>
</SPAN>
<DIV ID="hiliter"
STYLE="position:absolute; background-color:yellow; z-index:-1; visibility:hidden">
</DIV>
</BODY>
</HTML>