JavaScript DHTML/HTML/Style

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

In-Place Help

 

<html>
<head>
<title>In-Place Help</title>
<style type="text/css">
.help { position: absolute;
        left: 300px;
        top: 20px;
        visibility: hidden;
        width: 100px;
        padding: 10px; 
        border: 1px solid #f00;
}
form a:hover {cursor : help
</style>
<script type="text/javascript">
var item = null;
function showHelp(newItem) {
   if (item) {
       item.style.visibility="hidden";
   }
   item = document.getElementById(newItem);
   item.style.visibility="visible";
}
</script>
</head>
<body>
    <form>
        <a href="javascript:showHelp("item1")" alt="get help">click me to read help</a><BR>
        <a href="javascript:showHelp("item2")" alt="get help">click me to read help</a>
    </form>
    <div id="item1" class="help">help for the first item.</div>
    <div id="item2" class="help">help for the second item.</div>
</body>
</html>



Show and hide the div tags

 
<html>
<head>
<title>In-Place Help</title>
<style type="text/css">
.help { position: absolute;
        left: 300px;
        top: 20px;
        visibility: hidden;
        width: 100px;
        padding: 10px; 
        border: 1px solid #f00;
}
form a:hover {cursor : help
</style>
<script type="text/javascript">
var item = null;
function showHelp(newItem) {
   if (item) {
       item.style.visibility="hidden";
   }
   item = document.getElementById(newItem);
   item.style.visibility="visible";
}
</script>
</head>
<body>
    <form>
        <a href="javascript:showHelp("item1")" alt="get help">click me to read help</a><BR>
        <a href="javascript:showHelp("item2")" alt="get help">click me to read help</a>
    </form>
    <div id="item1" class="help">help for the first item.</div>
    <div id="item2" class="help">help for the second item.</div>
</body>
</html>



Style cssText

 
    
<html>
<body>
<script language="JavaScript">
function function1() {
    document.all.myP.style.cssText = "color:green; font-family:verdana; font-weight:bold; font-size:16";
} 
</script>
<p id="myP">Text Text Text Text Text Text Text Text </p>
<input type="button" value="Click to apply the style rules" onClick="function1();">
</body>
</html>



Style type Example

 
    
<html>
<body>
<style id="myStyle" type="CSS2"></style>
<button onclick="alert(document.all.myStyle.type);">style sheet</button>
</body>
</html>