в 10:02, 26 мая 2010

2010-05-26T10:02:41Z

Admin: 1 версия

2010-05-26T07:23:07Z

1 версия

Новая страница

==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>
<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>

</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="<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>

</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>
<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>

</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 <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>

<p id="p1">This <i>is</i> paragraph #1.</p>
<p id="p2">This <i>is</i> paragraph #2.</p>

<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>
<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>

</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>
<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>

</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>
<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>

</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()">
<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>

</source>

← Предыдущая	Версия 10:02, 26 мая 2010
(нет различий)

JavaScript DHTML/HTML/HTML Style - История изменений

в 10:02, 26 мая 2010

Admin: 1 версия