网页换肤：
<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. python wraps装饰器

    这是一个很有用的装饰器.看过前一篇反射的朋友应该知道,函数是有几个特殊属性比如函数名,在被装饰后,上例中的函数名foo会变成包装函数的名字 wrapper,如果你希望使用反射,可能会导致意外的结果.这 ...

  2. iOS开发时间戳与时间NSDate，时区的转换，汉字与UTF8,16进制的转换

    http://blog.sina.com.cn/s/blog_68661bd80101njdo.html 标签: ios时间戳 ios开发时间戳 ios16进制转中文 ios开发utf8转中文 ios ...

  3. 洛谷P2800 又上锁妖塔

    放题解 题目传送门 放代码

  4. Android 连接服务器，并进行相关操作

    1.连接服务器 (1)直接使用WINDOWS自带的远程桌面连接 win+R调出DOS操作窗口,输入mstsc.exe 点击确定,进入如下界面: 点击连接,输入用户名和密码登录,电脑会进入服务器界面.

  5. Android 通知(Notification)

    1.介绍 2.常用属性 3.java后台代码 package com.lucky.test30notification; import android.app.Notification; import ...

  6. PHP 中 快捷的三元运算...

    a!=null ? a: 123 当 a 不为空时,返回 123, 可简写为 a ?: 123(a 不为null 不为 '','0',0 时,返回它本身,否则返回123...)

  7. 教你搭建SpringMVC框架（ 附源码）

    一.项目目录结构 二.SpringMVC需要使用的jar包 commons-logging-1.2.jar junit-4.10.jar log4j-api-2.0.2.jar log4j-core- ...

  8. 洛谷 P2056 [ZJOI2007]捉迷藏 题解【点分治】【堆】【图论】

    动态点分治入 门 题? 题目描述 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由 \(N\) 个屋 ...

  9. P2801 教主的魔法

    传送门 $N$ 太大了主席树过不了 考虑分块 对每个块内的元素排序,询问就对大块二分查找,对两边小的部分暴力枚举 修改时维护 $add[i]$ 标记,维护当前块内整块已经加的数 那么整块的就直接修改 ...

  10. 江西理工大学南昌校区排名赛 B: 单身狗的数字游戏

    题目描述 萌樱花是一只单身狗. 萌樱花今天初始化了N个数字,使它们都为0 0 0 0... 萌樱花决定选取某一个位置,分别增加1到N(如果到达数组末尾就从头开始). 比如: 0 0 0(选择第二个位置 ...