JavaScript DHTML/HTML/DIV Style

Материал из Web эксперт
Перейти к: навигация, поиск

Div align Example

    
<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>
<div id="myDiv" 
     style="position:absolute; 
            visibility:visible; 
            width:354px; 
            height:122px; 
            background-color:red; 
            border:1px none #000000">
    <span>Span Span Span Span Span Span Span Span Span Span Span Span</span>
</div>
<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>



Using clientHeight and clientWidth Properties

/*
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>
<DIV ID="logo" STYLE="position:absolute; width:120px; visibility:hidden"><IMG SRC="htpp://www.wbex.ru/style/logo.png"></DIV>
<DIV ID="myDIV" STYLE="width:200px">
<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.
 Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident.</P>
</DIV>
</BODY>
</HTML>



Using the content Editable Property

/*
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>
<H1>Editing Contents</H1>
<HR>
<P>Turn on editing to modify the following text:</P>
<DIV ID="editableText">Edit this text on the fly....</DIV>
<P><BUTTON ID="editBtn" onClick="toggleEdit()" onFocus="this.blur()">
Enable Editing
</BUTTON></P>
</BODY>
</HTML>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/DIV_Style&oldid=2575»