网页换肤：
<div>

<button>red</button>

<button>blue</button>

<button>black</button>

<div>

 <script>

     var btn=document.getElementsByTagName("button");

     for(var i=0;i<btn.length;i++){

         btn[i].onclick=function(e){

         document.body.style.background=e.target.innerHTML;

         }

     }

 </script>
 
用循环改变元素背景：

<div id="s">

<button>red</button>

<button>blue</button>

<button>black</button>

<div>

<button id="kk">yellow</button>

<script>

var btn=document.getElementById("kk");

btn.onclick=function(e){

var  len=document.getElementById("s").getElementsByTagName("button");

for(var i=0;i<len.length;i++){

   len[i].style.background=e.target.innerHTML;

         }

     }

 </script>
鼠标移入移出改变元素样式：
<div id="s">

<div>

<style>

#s{background: blueviolet;width: 200px;height: 100px;}

#s.d{background: red;width: 100px;height: 50px;}

}

</style>

     <script>

         var dd=document.getElementById("s");

         dd.onmouseover=function(){

        dd.classList.add("d");

         }

         dd.onmouseout=function(){

             dd.className=""; 

      }

     </script>

鼠标移入移出交替显示提示框
<input  id="ss"type="radio"/>

<div id="tips">don`t forget it </div>

<script>

    window.onload=function(){

    var ss=document.getElementById("ss");

    var tips=document.getElementById("tips");

    ss.onmouseover=function(){

        tips.style.display="block";

    }

    ss.onmouseout=function(){

        tips.style.display="none";

    }

    }

</script>

<style>

    #tips{

        background: yellow;width: 150px;height: 20px;text-align: center;display: none;

    }

</style>
交替显示样式（三元运算符）
<input  id="ss"type="radio"/>

<div id="tips">don`t forget it </div>

<script>

    window.onload=function(){

    var ss=document.getElementById("ss");

    var tips=document.getElementById("tips");

    ss.onclick=function(){

        tips.style.display=(tips.style.display=="block")?"none":"block";

;

    }

    }

</script>

<style>

    #tips{

        background: yellow;width: 150px;height: 20px;text-align: center;display: none;

    }

</style>
时钟（时分秒）
<script>

 setInterval(b,1000);

 function b(){

　　var date=new Date();

 　var a=[date.getHours(),date.getMinutes(),date.getSeconds()];

　　for(var i in  a ){

　　 document.getElementsByClassName("datee")[i].innerHTML=a[i];　

 }

 }

</script>

<span class="datee">

</span>:

<span class="datee">

</span>:

<span class="datee">

</span>
纯css下拉菜单

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <ul id="nav">

             <li >Index

             <ul ><li>001</li>

                 <li>001</li>

                 <li>001</li>

             </ul>

             </li>

             <li>About

                 <ul><li>001</li>

                 <li>001</li>

                 <li>001</li>

             </ul>

              </li>

             <li>News

                 <ul><li>001</li>

                 <li>001</li>

                 <li>001</li>

             </ul>

              </li>

         </ul>

     <style>

         #nav,#nav ul{list-style: none;}

         #nav li{margin-right:1em;font-size:110%;text-align:center;background:darkkhaki;float: left;width: 10em;color: darkcyan;cursor: pointer;border: 1px solid rosybrown;}

         #nav ul{display: none;padding: 0 ;}

         #nav ul li{padding:0;background:darkgray;float: none;padding: 10px;border: 0 none transparent;padding: 0;}

         #nav li:hover ul{display: block;}

     </style>

    </body>

</html>

dhtml的更多相关文章

  1. DOM和DHTML等，复习总结

    DOM(Document Object Model),文件对象模型.HTML(HyperText Markup Language),超文本标记语言.HTML的超类:Node->Document: ...

  2. 提高 DHTML 页面性能

    联盟电脑摘要:本文说明了某些DHTML功能对性能的重大影响,并提供了一些提高DHTML页面性能的技巧. 目录 简介 成批处理DHTML更改 使用innerText 使用DOM添加单个元素 扩展SELE ...

  3. DHTML概述

    <!-- DHTML概述:动态的HTML.不是一门语言,是多项技术综合体的简称. 其中包含了HTML.CSS.DOM.JavaScript. 这四个技术在动态HTML页面效果定义时,都处于什么样 ...

  4. 链接，光标，DHTML，缩放

    18.1css中链接的使用超链接伪类属性:a:link 表示该链接文字尚未被点选a:visited 表示该链接文字已被点选过a:active 表示该链接文字正被点选,但未被放开a:hover 表示当鼠 ...

  5. HTML、XHTML XML和DHTML的区别

    XML与HTML的设计区别是:XML是用来存储数据的,重在数据本身.而HTML是用来定义数据的,重在数据的显示模式 XHTML(The Extensible HyperText Markup Lang ...

  6. [DHTML]什么是DHTML？

    DHTML 将 HTML.JavaScript.DOM 以及 CSS 组合在一起,用于创造动态性更强的网页. DHTML 总结 DHTML 只是一个术语,它描述了 HTML.JavaScript.DO ...

  7. Chrome内嵌 FlashPlayer（PPAPI）会被页面DHTML元素遮住的问题

    flash的wmode为window,Chrome版本为29.0.1547.66 m,Flash PPAPI为11.8.800.97,Flash NPAPI为11,8,800,94. flash在正常 ...

  8. ExtJs之DHTML,DOM,EXTJS的事件绑定区别

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  9. Css中光标,DHTML,缩放的使用

    Css中光标的使用: 属性名称                属性值                                         说明cursor                 ...

  10. DHTML 教程学习进度备忘

    书签:跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容: 1.这个学习进度和前面几个学习进度,只是学习了 ...

随机推荐

  1. (原創) Gvim 個人習慣常用設定 (vim)

    不定期更新這篇,因為查詢到好用的設定或者插件就會更新自己的設定. "set nocompatible let $LANG='zh_TW.UTF-8' set langmenu=zh_tw.u ...

  2. XAF实现交叉分析

    如何实现如图的交叉分析? In this lesson, you will learn how to add the Analysis functionality to your applicatio ...

  3. Linux环境查看系统参数

    一.查看CPU信息 lscpu cat /proc/cpuinfo   二.查看CPU位数 getconf LONG_BIT   三.查看MEM信息 free free -m cat /proc/me ...

  4. MySql 碎片

    查看某个表所占空间,以及碎片大小. select table_name,engine,table_rows,data_length+index_length length,DATA_FREE from ...

  5. python之常用的数据类型

    1. 变量的定义以及声明 在学习变量之前,咱们需要知道变量的命名规则: ① 变量必须由数字字母下划线构成,如a_1 ② 变量名不能以数字开头,如1a ③ 需要遵循驼峰命名法 给变量赋值通常采用“=”, ...

  6. 网络寻路（思维+vector的应用）-----------蓝桥备战系列

    标题:网络寻路 X 国的一个网络使用若干条线路连接若干个节点.节点间的通信是双向的.某重要数据包,为了安全起见,必须恰好被转发两次到达目的地.该包可能在任意一个节点产生,我们需要知道该网络中一共有多少 ...

  7. ul模拟select，位置，数据，是否可输入及输入提示效果都可作为参数直接传入

    转发请注明出处,虽然转发几率不大... HTML <span class="theContainer"></span> CSS body {padding: ...

  8. WordPress 有关Https的设置

    开头卖萌求点击 https://www.yinghualuowu.com/ Http和Https的区别 就是多了s的区别(不是),简单点就是比http更安全了.23333.这里不打算说的太详细,知道前 ...

  9. Reading a IMU Without Kalman: The Complementary Filter

    目标是将惯性测量元件(IMU)之中陀螺仪.加速计的数据结合使用.Kalman filter太复杂,在微机上倾向用一种更简单的方法:Complementary filter 姿态估计(获得3个角度,俯仰 ...

  10. Java基础22-Static关键字

    1.static关键字 public class Test{ public static void main(String[] args){ Persion p1=new Persion(); Per ...