dom对象详解--style对象

style对象

style对象和document对象下的集合对象styleSheets有关系，styleSheets是文档中所有style对象的集合，这里讲解的重点是style对象，styleSheets不是重点。

style对象定义：Represents the current settings of all possible inline styles for agiven element，即表示当前元素的样式设置。

例，可拖动的窗口

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>document示例--可拖动的DIV</title>
  6.     <script type="text/javascript">
  7.         var x = 0, y = 0, x1 = 0, y1 = 0;
  8.         var moveable = false;
  9.         var index = 20000;
  10.         //开始拖动
  11.         //onmousedown 某个鼠标按键被按下
  12.         function startDrag(obj, evt) {
  13.             //这行代码又是什么意思???
  14.             e = evt ? evt : window.event;
  15.             //wo艹，更加看不懂这段代码再搞什么飞机了???
  16.             if(!window.captureEvents) {
  17.                 obj.setCapture();
  18.             } else {
  19.                 window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
  20.             }
  21.             var win = obj.parentNode;//取得父窗体(父窗体就是该div得上一级div)
  22.             win.style.zIndex = ++index;//设置父窗体的z轴值(又关z轴什么啊!!!)
  23.             x = e.clientX;//取得当前鼠标的X坐标
  24.             y = e.clientY;//取得当前鼠标的Y坐标
  25.             //将父窗体的距浏览器左边界的距离转换为NUMBER
  26.             x1 = parseInt(win.style.left.substring(0, win.style.left.indexOf("p")));
  27.             ////将父窗体的距浏览器右边界的距离转换为NUMBER
  28.             y1 = parseInt(win.style.top.substring(0, win.style.top.indexOf("p")));
  29.             moveable = true;
  30.         }
  31.         //拖动
  32.         //onmousemove 鼠标被移动
  33.         function drag(obj, evt) {
  34.             //这行代码又是什么意思???
  35.             e = evt ? evt : window.event;
  36.             if(moveable) {
  37.                 var win = obj.parentNode;
  38.                 win.style.left = (x1 + e.clientX - x) + "px";
  39.                 win.style.top = (y1 + e.clientY - y) + "px";
  40.             }
  41.         }
  42.         //停止拖动
  43.         //onmouseup 鼠标按键被松开
  44.         function stopDrag(obj) {
  45.             //wo艹，更加看不懂这段代码再搞什么飞机了???
  46.             if(moveable) {
  47.                 if(!window.captureEvents) {
  48.                     obj.releaseCapture();
  49.                 } else {
  50.                     window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
  51.                 }
  52.             }
  53.             moveable = false;
  54.         }
  55.     </script>
  56. </head>
  57. <body>
  58.     <div style="left: 154px; top: 100px; position: absolute; width: 200px; height: 200px; background-color: #99CCFF; z-index: 200;">
  59.         <div id="title" onmousedown="startDrag(this, event)" onmousemove="drag(this, event)" onmouseup="stopDrag(this)" style="width: 195px; height: 20px;background-color: #330033; top: 0px; left: 0px; position: absolute; font-size: 12px; color: #ffffff; z-index: 200; padding-top: 5px; padding-left: 5px; cursor: hand;">
  60.             浮动窗口
  61.         </div>
  62.         实例
  63.     </div>
  64. </body>
  65. </html>

style对象不是针对某一个html元素，而是对所有的html元素而言的，也就是说，我们可以通过document.getElementById("id").style.property="值"，来控制网页文档的任何一个元素(对象)的样式，当然这个很重要的。

js通过style对象把css结合起来的，所以html dom学习时要有css的基础。

style对象常用的函数和属性可参考http://www.w3school.com.cn/jsref/dom_obj_style.asp。

例，background属性的使用示例——坦克转向(一次加载一个背景图，通过显示该背景图的不同部分，实现转向的效果)

准备素材：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript">
  7.         function change(obj) {
  8.             if(obj.value == "上") {
  9.                 tank.style.backgroundPositionY="0px";
  10.             } else if(obj.value == "右") {
  11.                 tank.style.backgroundPositionY="120px";
  12.             } else if(obj.value == "下") {
  13.                 tank.style.backgroundPositionY="80px";
  14.             } else if(obj.value == "左") {
  15.                 tank.style.backgroundPositionY="40px";
  16.             }
  17.         }
  18.     </script>
  19. </head>
  20. <body>
  21.     <div id="tank" style="background-position-y: -40px; background-image: url('itank.jpg'); width: 40px; height: 40px;" ></div>
  22.     <input type="button" value="上" onclick="change(this)" />
  23.     <input type="button" value="右" onclick="change(this)" />
  24.     <input type="button" value="下" onclick="change(this)" />
  25.     <input type="button" value="左" onclick="change(this)" />
  26. </body>
  27. </html>

对background-position-y的理解(图示)：

例，搜狐频道切换效果。

搜狐div.css：(写css是做麻烦的，痛中之痛，自己写绝对懵逼！！！)

  1. body{
  2.     font-size:12px;
  3. }
  4.  
  5. .div1{
  6.     width:126px;
  7.     height:156px;
  8. }
  9.  
  10. .navi{
  11.     width:21px;
  12.     height:156px;
  13.     float:left;
  14. }
  15.  
  16. .navi ul{
  17.     padding:0px;
  18.     margin-left:0px;
  19.     margin-top:0px;
  20.     float:left;
  21. }
  22.  
  23. .navi ul li{
  24.     list-style-type:none;
  25.     width:21px;
  26.     height:38px;
  27.     margin-top:3px;
  28.     text-align:center;
  29.     padding-top:10px;
  30.     background-color:silver;
  31.     float:left;
  32. }
  33.  
  34. .zs,.rz,.cg{
  35.     width:100px;
  36.     height:156px;
  37.     margin-left:4px;
  38.     float:left;
  39. }
  40.  
  41. .zs ul,.rz ul,.cg ul{
  42.     padding:0px;
  43.     margin-top:2px;
  44.     margin-left:0px;
  45.     float:left;
  46. }
  47.  
  48. .zs ul li,.rz ul li,.cg ul li{
  49.     list-style-type:none;
  50.     margin-top:0px;
  51.     margin-left:2px;
  52.     line-height:19px;
  53.     float:left;
  54. }
  55.  
  56. .rz,.cg{
  57.     /*visibility:hidden;*/
  58.     display:none;
  59. }

仿搜狐div切换.html(JS代码倒还简单)：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>搜狐频道切换效果</title>
  6.     <link rel="stylesheet" type="text/css" href="搜狐div.css">
  7.     <script type="text/javascript">
  8.         //onmouseover 鼠标移到某元素之上
  9.         function change(val, obj) {
  10.             obj.style.backgroundColor = "#FFC12D";
  11.             if(val == "zs") {
  12.                 zs.style.display = "block";
  13.                 rz.style.display = "none";
  14.                 cg.style.display = "none";
  15.             } else if(val == "rz") {
  16.                 zs.style.display = "none";
  17.                 rz.style.display = "block";
  18.                 cg.style.display = "none";
  19.             } else if(val == "cg") {
  20.                 zs.style.display = "none";
  21.                 rz.style.display = "none";
  22.                 cg.style.display = "block";
  23.             }
  24.         }
  25.         //onmouseout 鼠标从某元素移开
  26.         function change2(obj) {
  27.             obj.style.backgroundColor = "silver";
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32.     <div class="div1">
  33.     <!--导航DIV-->
  34.     <div class="navi">
  35.         <ul>
  36.             <li id="zsli" onmouseover="change('zs', this)" onmouseout="change2(this)">招生</li>
  37.             <li id="rzli" onmouseover="change('rz', this)" onmouseout="change2(this)">热招</li>
  38.             <li id="cgli" onmouseover="change('cg', this)" onmouseout="change2(this)">出国</li>
  39.         </ul>
  40.     </div>
  41.     <!--超链接DIV3个-->
  42.     <div id="zs" class="zs">
  43.         <ul>
  44.             <li><a href='#'>招生招生招生招生</a></li>
  45.             <li><a href='#'>招生招生招生招生</a></li>
  46.             <li><a href='#'>招生招生招生招生</a></li>
  47.             <li><a href='#'>招生招生招生招生</a></li>
  48.             <li><a href='#'>招生招生招生招生</a></li>
  49.             <li><a href='#'>招生招生招生招生</a></li>
  50.             <li><a href='#'>招生招生招生招生</a></li>
  51.             <li><a href='#'>招生招生招生招生</a></li>
  52.         </ul>
  53.     </div>
  54.     <div id="rz" class="rz" >
  55.         <ul>
  56.             <li><a href='#'>热招热招热招热招</a></li>
  57.             <li><a href='#'>热招热招热招热招</a></li>
  58.             <li><a href='#'>热招热招热招热招</a></li>
  59.             <li><a href='#'>热招热招热招热招</a></li>
  60.             <li><a href='#'>热招热招热招热招</a></li>
  61.             <li><a href='#'>热招热招热招热招</a></li>
  62.             <li><a href='#'>热招热招热招热招</a></li>
  63.             <li><a href='#'>热招热招热招热招</a></li>
  64.         </ul>
  65.     </div>
  66.     <div id="cg" class="cg">
  67.         <ul>
  68.             <li><a href='#'>出国出国出国出国</a></li>
  69.             <li><a href='#'>出国出国出国出国</a></li>
  70.             <li><a href='#'>出国出国出国出国</a></li>
  71.             <li><a href='#'>出国出国出国出国</a></li>
  72.             <li><a href='#'>出国出国出国出国</a></li>
  73.             <li><a href='#'>出国出国出国出国</a></li>
  74.             <li><a href='#'>出国出国出国出国</a></li>
  75.             <li><a href='#'>出国出国出国出国</a></li>
  76.         </ul>
  77.     </div>
  78. </div>
  79. </body>
  80. </html>

现在再看一个案例：完成功能，鼠标点击+号显示家庭成员，点击-号则收回。

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>document示例--树状展开和关闭</title>
  6.     <script type="text/javascript">
  7.         function test1_onclick() {
  8.             if(test1.innerText == "-") {
  9.                 myList.style.display = "none";
  10.                 test1.innerText = "+";
  11.             } else {
  12.                 myList.style.display = "block";
  13.                 test1.innerText = "-";
  14.             }
  15.         }
  16.     </script>
  17. </head>
  18. <body>
  19.     <p>
  20.         <font face="宋体">
  21.             <span id="test1" style="border: 4px solid red; cursor: hand;" onclick="return test1_onclick()">-</span>
  22.             myFamily
  23.         </font>
  24.     </p>
  25.     <ul id="myList">
  26.         <li><font face="宋体">爸爸</font></li>
  27.         <li><font face="宋体">妈妈</font></li>
  28.         <li><font face="宋体">弟弟</font></li>
  29.     </ul>
  30. </body>
  31. </html>

接着一个案例：使用js实现购物车的功能(简易功能)

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>我的购物车</title>
  6.     <script type="text/javascript" language="javascript">
  7.         function gouwu(obj) {
  8.             //遍历所有的checkbox，计算新的总价
  9.             var fruits = document.getElementsByName("fruit");
  10.             var totalPrice = 0;
  11.             for(var i = 0; i < fruits.length; i++) {
  12.                 if(fruits[i].checked) {
  13.                     totalPrice += parseFloat(fruits[i].value);
  14.                 }
  15.             }
  16.             myspan.innerText = totalPrice + "元";
  17.         }
  18.     </script>
  19. </head>
  20. <body>
  21.     <h1>我的购物车</h1>
  22.     <input type="checkbox" name="fruit" value="10" onclick="gouwu(this)" />苹果 10元<br/>
  23.     <input type="checkbox" name="fruit" value="20" onclick="gouwu(this)" />香蕉 20元<br/>
  24.     <input type="checkbox" name="fruit" value="30" onclick="gouwu(this)" />西瓜 30元<br/>
  25.     <input type="checkbox" name="fruit" value="40" onclick="gouwu(this)" />栗子 40元<br/>
  26.     <input type="checkbox" name="fruit" value="50" onclick="gouwu(this)"/>哈密瓜 50元<br/>
  27.     总价格是：<span id="myspan">0元</span>
  28. </body>
  29. </html>

再看一个案例：动态选择一门课程。

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>动态选择一门课程</title>
  6.  
  7. </head>
  8. <body>
  9.     <select id="myCourse" onchange="getCourse()">
  10.         <option value="" selected="true">--请选择一门课程--</option>
  11.     </select>
  12.     <textarea id="myares" cols="30" rows="10"></textarea>
  13.     <script type="text/javascript">
  14.         var last_select_num = 3;//假如从数据库中查询，发现用户上次选择了3门课程
  15.         //动态添加第一门课程 java语言程序设计
  16.         var myOption = document.createElement("option");
  17.         myOption.value = "java语言程序设计";
  18.         myOption.text = "java语言程序设计";
  19.         myCourse.add(myOption);
  20.         //动态添加第二门课程 数据结构与算法
  21.         myOption = document.createElement("option");
  22.         myOption.value = "数据结构与算法";
  23.         myOption.text = "数据结构与算法";
  24.         myCourse.add(myOption);
  25.         //动态添加第二门课程 计算机组成原理
  26.         myOption = document.createElement("option");
  27.         myOption.value = "计算机组成原理";
  28.         myOption.text = "计算机组成原理";
  29.         myCourse.add(myOption);
  30.  
  31.         function getCourse() {
  32.             myares.value += "你选中了:"+myCourse.value+"\r\n";
  33.         }
  34.     </script>
  35. </body>
  36. </html>

最后看一个案例：全选全不选功能：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>document示例--全选功能</title>
  6.     <script type="text/javascript">
  7.         function selectCheck(obj) {
  8.             //window.alert(obj.innerText);
  9.             var fruits = document.getElementsByName("fruit");
  10.             if(obj.innerText == "全选") {
  11.                 for (var i = 0; i < fruits.length; i++) {
  12.                     fruits[i].checked = true;
  13.                 }
  14.             } else {
  15.                 for (var i = 0; i < fruits.length; i++) {
  16.                     fruits[i].checked = false;
  17.                 }
  18.             }
  19.         }
  20.         //响应复选框
  21.         function selectCheck2() {
  22.             var fruits = document.getElementsByName("fruit");
  23.             if(myselect.checked) {
  24.                 for (var i = 0; i < fruits.length; i++) {
  25.                     fruits[i].checked = true;
  26.                 }
  27.             } else {
  28.                 for (var i = 0; i < fruits.length; i++) {
  29.                     fruits[i].checked = false;
  30.                 }
  31.             }
  32.         }
  33.     </script>
  34. </head>
  35. <body>
  36.     <h1>我的购物车</h1>
  37.     <input type="checkbox" name="fruit" value="10" onclick="gouwu(this)" />苹果 10元<br/>
  38.     <input type="checkbox" name="fruit" value="20" onclick="gouwu(this)" />香蕉 20元<br/>
  39.     <input type="checkbox" name="fruit" value="30" onclick="gouwu(this)" />西瓜 30元<br/>
  40.     <input type="checkbox" name="fruit" value="40" onclick="gouwu(this)" />栗子 40元<br/>
  41.     <input type="checkbox" name="fruit" value="50" onclick="gouwu(this)"/>哈密瓜 50元<br/>
  42.     <a href="#" onclick="selectCheck(this)">全选</a>
  43.     <a href="#" onclick="selectCheck(this)">取消</a><br/>
  44.     <input type="checkbox" id="myselect" onclick="selectCheck2()" />是否全选
  45. </body>
  46. </html>

dom对象详解--document对象(二)的更多相关文章

  1. dom对象详解--document对象(一)

     document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...

  2. dom对象详解--document对象(三)

     form对象 form对象代表一个HTML表单,在HTML文档中<form>每出现一次,form对象就会被创建.从dom对象层次图看,document.forms对象是当前文档所有for ...

  3. js对象详解(JavaScript对象深度剖析，深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  4. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  5. Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697

    详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...

  6. mvc-servlet---ServletConfig与ServletContext对象详解（转载）

    ServletConfig与ServletContext对象详解 一.ServletConfig对象    在Servlet的配置文件中,可以使用一个或多个<init-param>标签为s ...

  7. JavaWeb学习----JSP内置对象详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  8. jQuery的deferred对象详解（一）

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  9. ActiveXObject对象详解

    一.什么是 ActiveX 控件?         ActiveX 控件广泛用于 Internet.它们可以通过提供视频.动画内容等来增加浏览的乐趣.不过,这些程序可能出问题或者向您提供不需要的内容. ...

随机推荐

  1. Google工程师打造Remix OS系统 桌面版安卓下载

    三位前Google工程师打造的Remix OS系统终于来到了PC桌面上,现已可以下载尝鲜. Remix OS for PC基于Android-x86项目,由安卓5.1 Lollipop深度定制而来,不 ...

  2. 从烙铁手到IT男

    时间:2015年8月27日 21:37:44 作者:luomg 摘要: 简要记录一写自己干的这个行当,多少是个回忆,不然某一天呜呼哀哉了啥也没有记录,会随着时间更新(大学时熬夜绘制了很多altium ...

  3. 37.altium designer中的class和rules？

    在布局布线工程中,遇到复杂工程时,难免要进行class和rules的设置,经过试验证明,class和rules的子目录是有优先级的.

  4. curl库 c语言的curl 编程

    c语言的curl 编程 [Linux@centos-64-min exercise]# gcc -Wall -o curltest curltest.c /tmp/ccosVANi.o: In fun ...

  5. 团队开发——Alpha版总结会议

    本组目前存在的问题: 1.在选题的时候,题目选的比较有难度,造成后期工作量较大,实现有难度(未能正确估计项目的难度). 2.最初规划时,设计的功能较多,但是技术水平达不到,导致目前完成功能较少. 3. ...

  6. LeetCode Shell Problems

    195. Tenth Line -- 第十行 How would you print just the 10th line of a file? Solution: awk 'NR==10' file ...

  7. Node.js 学习（三） NPM 使用介绍

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...

  8. Google Guava学习笔记——简介

    Google Guava是什么东西?首先要追溯到2007年的“Google Collections Library”项目,它提供对Java 集合操作的工具类.后来Guava被进化为Java程序员开发必 ...

  9. 802.11 wireless 三

    802.11 wireless 3watts,milliwatts,and Decibels瓦特(功率单位)的定义是1焦耳/秒微波炉1000瓦特,手机100-200毫瓦 decibels(分贝:比较能 ...

  10. 【BZOJ】【3282】Tree

    LCT 喜闻乐见的Link-Cut-Tree…… srO zyf http://www.cnblogs.com/zyfzyf/p/4149109.html 目测我是第222个?………………不要在意这些 ...