JavaScript DHTML/HTML/DIV Style
Содержание
Div align Example
<source lang="html4strict">
<html> <head> <script language="JavaScript">
function function1() {
document.all.myDiv.align = "center";
}
function function2() {
document.all.myDiv.align = "justify";
}
function function3() {
document.all.myDiv.align = "left";
}
function function4() {
document.all.myDiv.align = "right";
}
</script> </head> <body>
Span Span Span Span Span Span Span Span Span Span Span Span
<input type="Button" value="Center" onClick="function1();"> <input type="Button" value="Justify" onClick="function2();"> <input type="Button" value="Left" onClick="function3();"> <input type="Button" value="Right" onClick="function4();"> </body> </html>
</source>
Using clientHeight and clientWidth Properties
<source lang="html4strict">
/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001
- /
<HTML> <HEAD> <TITLE>clientHeight and clientWidth Properties</TITLE> <SCRIPT LANGUAGE="JavaScript"> function showLogo() {
var paragraphW = document.all.myDIV.clientWidth
var paragraphH = document.all.myDIV.clientHeight
// correct for Windows/Mac discrepancies
var paragraphTop = (document.all.myDIV.clientTop) ?
document.all.myDIV.clientTop : document.all.myDIV.offsetTop
var logoW = document.all.logo.style.pixelWidth
// center logo horizontally against paragraph
document.all.logo.style.pixelLeft = (paragraphW-logoW)/2
// position image immediately below end of paragraph
document.all.logo.style.pixelTop = paragraphTop + paragraphH
document.all.logo.style.visibility = "visible"
} </SCRIPT> </HEAD> <BODY> <BUTTON onClick="showLogo()">Position and Show Logo Art</BUTTON>
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. Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
</BODY> </HTML>
</source>
Using the content Editable Property
<source lang="html4strict">
/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001
- /
<HTML> <HEAD> <STYLE TYPE="text/css"> .normal {color: black} .editing {color: red} </STYLE> <SCRIPT LANGUAGE="JavaScript"> function toggleEdit() {
var newState = !editableText.isContentEditable editableText.contentEditable = newState editableText.className = (newState) ? "editing" : "normal" editBtn.innerText = (newState) ? "Disable Editing" : "Enable Editing"
} </SCRIPT> <BODY>
Editing Contents
Turn on editing to modify the following text:
<BUTTON ID="editBtn" onClick="toggleEdit()" onFocus="this.blur()"> Enable Editing </BUTTON>
</BODY> </HTML>
</source>
