<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>className Property</title>
<style type="text/css">
.special {font-size:16pt; color:red;}
</style>
<script type="text/javascript">
function toggleSpecialStyle(elemID) {
var elem = (document.all) ? document.all(elemID) :
document.getElementById(elemID);
if (elem.className == "") {
elem.className = "special";
} else {
elem.className = "";
}
}
</script>
</head>
<body>
<h1>className Property Lab</h1>
<hr />
<form name="input">
<input type="button" value="Toggle Class Name" onclick="toggleSpecialStyle('head1')" />
</form>
<br />
<h1 id="head1">Article I</h1>
<P>Congress shall make no law respecting an establishment of religion, or prohibiting the free exericse thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the government for a redress of grievances.</P>
<h1>Article II</h1>
<P>A well regulated militia, being necessary to the security of a free state, the right of the people to keep and bear arms, shall not be infringed.</P>
</body>
</html>
Here is something else I wrote:
<html>
<head>
<title>clientHeight and clientWidth Properties</title>
<link rel=stylesheet HREF="bibleStyles.css" type="text/css">
<script type="text/javascript">
function getInfo(){
var divWidth = document.getElementById("myDIV").clientWidth;
var divHeight = document.getElementById("myDIV").clientHeight;
var lineText = "Width = " + divWidth + " Height = " + divHeight;
var lineTextNode = document.createTextNode(lineText);
var newP = document.createElement('p');
var divInfo = document.getElementById('divInfo');
newP.appendChild(lineTextNode);
divInfo.appendChild(newP);
alert(document.styleSheets.length);
}
function changeWidth() {
document.styleSheets[0].insertRule("#myDiv {width:400px;}",0);
getInfo();
}
</script>
</head>
<body>
<button type="button" onclick="getInfo()">Get info</button>
<button type="button" onclick="changeWidth()">Change width</button>
<div id="myDIV">
<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 laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="divInfo">
</div>
</body>
</html>
Here is another tutorial.
<script language="JavaScript">
var varA=2;
var varB=5;
if (varA == 0) {
document.write("varA == 0");
}
else {
if ((varA * 2) >= varB) {
document.write("(varA *2) >= varB");
}
else {
document.write("(varA*2) < varB");
document.write(varB);
}
}
</script>
Here is another tutorial 0 = False 1 = True
<script language="JavaScript">
var temp = 1;
var temp2 = 0;
if (temp == true) {
document.write("statement1 is true");
}
else {
document.write("statement1 is false");
}
document.write('
')
if (temp2 == true) {
document.write("statement2 is true");
}
else {
document.write('statement2 is not true');
}
</script>
Here is another tutorial:
<script language ="JavaScript">
var response = confirm("Do you want to proceed with this book? Click OK to proceed otherwise click Cancel.")
if (response == true)
{
alert("A fine choice!");
} else {
alert("A not so fine choice!");
}
</script>
Here is another tutorial
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS Resolution Demo</title>
<link rel="StyleSheet" href="basic.css" type="text/css" />
<script type="text/javascript">
//Define a variable called cssName and a message
//called resolutionInfo
var cssName;
var resolutionInfo;
//If the width of the screen is less than 650 pixels
if (screen.availWidth < 650) {
// define the style Variable as teh low-resoltion style
cssName = "lowres.css";
resolutionInfo = 'low resoltiion';
// or if the width of the screen is less than 1000 pixels
} else {
if (screen.availWidth > 1000) {
//define the style variable as the high-resolution style
cssName = "highres.css";
resolutionInfo = 'high resoltion';
//otherwise
} else {
// define the style Variable as the mid-resolution style
cssName = 'lowres.css';
resolutionInfo = 'medium resoltion';
}
}
document.write( '<link rel="StyleSheet" href="' + cssName + '" type="text/css" />');
</script>
</head>
<body>
<script type="text/javascript">
document.write('
Applied Style:' + resolutionInfo + '
');</script>
</body>
1 comment:
These first several e3xamples show different ways of changing texts proerty thru javascript.
In the first example, you use javascript to change the classid of a document element.
In the second example, you acutally add a rule to the documents stylesheets collection.
In the last example, you chose a css name based on screen width.
I think I like the third e3xample best, since it follows the idea of css, to separate the web page to some degree from its styles.
Post a Comment