`
sty2008boy
  • 浏览: 301560 次
  • 性别: Icon_minigender_1
  • 来自: 太原
社区版块
存档分类
最新评论

JS 遍历页面上所有的控件

阅读更多

获得所有控件ID 

Html代码  
var arrAll=document.all;   
  
for(i=0;i <arrAll.length;i++)   
{   
    alert(arrAll[i].id);   
    alert(arrAll[i].name);   
      if(arrAll[i].id== '... ')   
      {   
          //   do   something   
      }   
}  

var arrAll=document.all;

for(i=0;i <arrAll.length;i++)
{
    alert(arrAll[i].id);
    alert(arrAll[i].name);
      if(arrAll[i].id== '... ')
      {
          //   do   something
      }
}

Html代码  
var arrAll=document.form[0].elements;   
  
for(i=0;i <arrAll.length;i++)   
{   
     var strId += '- '+arrAll[i].id;   
}  

var arrAll=document.form[0].elements;

for(i=0;i <arrAll.length;i++)
{
     var strId += '- '+arrAll[i].id;
}

Html代码  
var arrAll=document.all;   
  
for (i=0;i <arrAll.length;i++)   
{   
    if(arrAll[i].name == 'label')   
    {   
        document.getElementById(arrAll[i].id).style.color = "black";   
    }   
}  

var arrAll=document.all;

for (i=0;i <arrAll.length;i++)
{
    if(arrAll[i].name == 'label')
    {
        document.getElementById(arrAll[i].id).style.color = "black";
    }
}

鼠标选择控件,使控件变颜色,并且用4个按钮改变多个控件的位置 
js代码 
Js代码  
<script type="text/javascript" >   
  
    var labelID = "";   
  
    function moveTop()   
    {   
       var a=document.getElementById(labelID).style.top;   
       var Top=a.substring(0,a.indexOf("px"));   
       document.getElementById(labelID).style.top= parseInt(Top)-10;// 向上   
    }   
    function moveUnder()   
    {   
       var a=document.getElementById(labelID).style.top;   
       var Top=a.substring(0,a.indexOf("px"));   
       document.getElementById(labelID).style.top= parseInt(Top)+10;// 向下   
    }   
    function moveLeft()   
    {   
       var b=document.getElementById(labelID).style.left;   
       var Left=b.substring(0,b.indexOf("px"));   
       document.getElementById(labelID).style.left= parseInt(Left)-10;// 向左   
    }   
    function moveRight()   
    {   
       var b=document.getElementById(labelID).style.left;   
       var Left=b.substring(0,b.indexOf("px"));   
       document.getElementById(labelID).style.left= parseInt(Left)+10;// 向右边   
    }   
    function getID(labelIDCS)   
    {   
       labelID = labelIDCS;   
  
       var arrAll=document.all;   
  
       for (i=0;i <arrAll.length;i++)   
       {   
           if(arrAll[i].name == 'label')   
           {   
               document.getElementById(arrAll[i].id).style.color = "black";   
           }   
       }   
       document.getElementById(labelID).style.color = "red";   
    }   
</script>  

<script type="text/javascript" >

    var labelID = "";

    function moveTop()
    {
       var a=document.getElementById(labelID).style.top;
       var Top=a.substring(0,a.indexOf("px"));
       document.getElementById(labelID).style.top= parseInt(Top)-10;// 向上
    }
    function moveUnder()
    {
       var a=document.getElementById(labelID).style.top;
       var Top=a.substring(0,a.indexOf("px"));
       document.getElementById(labelID).style.top= parseInt(Top)+10;// 向下
    }
    function moveLeft()
    {
       var b=document.getElementById(labelID).style.left;
       var Left=b.substring(0,b.indexOf("px"));
       document.getElementById(labelID).style.left= parseInt(Left)-10;// 向左
    }
    function moveRight()
    {
       var b=document.getElementById(labelID).style.left;
       var Left=b.substring(0,b.indexOf("px"));
       document.getElementById(labelID).style.left= parseInt(Left)+10;// 向右边
    }
    function getID(labelIDCS)
    {
       labelID = labelIDCS;

       var arrAll=document.all;

       for (i=0;i <arrAll.length;i++)
       {
           if(arrAll[i].name == 'label')
           {
               document.getElementById(arrAll[i].id).style.color = "black";
           }
       }
       document.getElementById(labelID).style.color = "red";
    }
</script>
asp HTML代码 
Html代码  
<asp:Label ID = "lblDSRText" Text = "当事人" runat = "server" name="label" Style="left: 280px; position: absolute;top: 262px" onclick="getID('lblDSRText')" Width="38px" ></asp:Label>  
<asp:Label ID = "lblDSRXMText" Text = "当事人姓名" runat = "server" name="label" Style="left: 541px; position: absolute;top: 262px" onclick="getID('lblDSRXMText')" Width="61px"></asp:Label>  
  
<asp:ImageButton ID = "ibnSY" runat = "server" ImageUrl="~/imgs/top.GIF" onclick="moveTop()" />  
<asp:ImageButton ID = "ibnXY" runat = "server" ImageUrl="~/imgs/down.GIF" onclick="moveUnder()" />  
<asp:ImageButton ID = "ibnZY" runat = "server" ImageUrl="~/imgs/left.GIF" onclick="moveLeft()" />  
<asp:ImageButton ID = "ibnYY" runat = "server" ImageUrl="~/imgs/right.GIF" onclick="moveRight()" />  

<asp:Label ID = "lblDSRText" Text = "当事人" runat = "server" name="label" Style="left: 280px; position: absolute;top: 262px" onclick="getID('lblDSRText')" Width="38px" ></asp:Label>
<asp:Label ID = "lblDSRXMText" Text = "当事人姓名" runat = "server" name="label" Style="left: 541px; position: absolute;top: 262px" onclick="getID('lblDSRXMText')" Width="61px"></asp:Label>

<asp:ImageButton ID = "ibnSY" runat = "server" ImageUrl="~/imgs/top.GIF" onclick="moveTop()" />
<asp:ImageButton ID = "ibnXY" runat = "server" ImageUrl="~/imgs/down.GIF" onclick="moveUnder()" />
<asp:ImageButton ID = "ibnZY" runat = "server" ImageUrl="~/imgs/left.GIF" onclick="moveLeft()" />
<asp:ImageButton ID = "ibnYY" runat = "server" ImageUrl="~/imgs/right.GIF" onclick="moveRight()" />
 
分享到:
评论

相关推荐

    cleartext按顺序遍历网页上所有控件

    在IT领域,尤其是Web开发和自动化测试中,"cleartext"通常指的是未加密或明文文本,这里的"按顺序遍历网页上所有控件"则涉及到网页元素的交互和自动化处理。在这个场景下,我们可以深入探讨以下几个相关知识点: 1....

    前台和后台查找页面上所有控件的通用方法

    在Web开发中,为了动态地操作网页上的各种控件(如文本框、按钮等),通常需要一种能够遍历页面上所有控件的方法。本文将详细介绍两种不同的技术来实现这一目标:一种是前台JavaScript实现,另一种则是后台C#实现。...

    Gridview用javascript遍历所有控件的例子

    总结来说,通过JavaScript遍历GridView中的控件,我们可以实现客户端的批量操作,如批量删除、更新和修改。这种做法提高了用户体验,因为操作无需刷新整个页面即可完成。同时,理解并熟练运用JavaScript、jQuery以及...

    Javascript如何遍历一个文件夹下的所有文件与目录

    ### JavaScript遍历文件夹下的所有文件与目录 在JavaScript中,遍历文件夹下的所有文件与目录是一项常见的任务,尤其是在需要处理本地文件系统时。本文将详细介绍如何使用`Scripting.FileSystemObject`对象来实现这...

    javascript遍历控件实例详细解析.docx

    使用 `document.forms[0]` 可以获取当前页面的所有控件集合,然后使用 `for` 循环遍历控件集合,获取每个控件的类型和值。 2. 遍历控件的类型 使用 `inputArr[i].type.toUpperCase()` 可以获取控件的类型,然后...

    遍历页面控件换CSS

    例如,以下是一段使用JavaScript遍历页面中所有元素的示例代码: ```javascript var elements = document.getElementsByTagName('*'); for (var i = 0; i ; i++) { console.log(elements[i]); } ``` 这段代码会...

    Javascript 遍历页面text控件详解

    本文将详细介绍如何使用Javascript遍历页面上所有的text类型的控件,并提取这些控件的ID。这种方法可以帮助开发者实现对页面上特定元素的批量操作,如批量验证、批量修改样式等。 首先,我们来了解Javascript中获取...

    javascript遍历控件实例详细解析

    js遍历页面控件, 代码如下: var inputArr = document.forms[0]; for( var i = 0; i &lt; inputArr.length; i++ ) { if( inputArr[i].type.toUpperCase() == “BUTTON” ) { inputArr[i].disabled=”disabled”...

    jQuery 遍历css选择器

    其中,jQuery的CSS选择器是其核心功能之一,它提供了丰富的选择器来帮助开发者高效地选取页面上的元素。这篇教程将深入探讨jQuery如何遍历CSS选择器,并从中提取出相关知识点。 **一、jQuery选择器概述** jQuery...

    JS禁用页面上所有控件的实现方法(附demo源码下载).docx

    总结起来,禁用页面上所有控件的核心思想是遍历所有相关元素,并修改它们的`disabled`属性。在不同的浏览器环境下,可能需要采用不同的方法来获取元素集合。此外,如果希望在禁用控件的同时保持其视觉状态不变,可以...

    javascript客户端遍历控件与获取父容器对象示例代码

    例如,`document.getElementsByTagName("input")`会返回页面上所有的`input`标签元素。之后通过循环(如for循环),可以逐一访问这些元素,并进行相应的操作。 例如,函数`findControlAll()`遍历页面中所有的`input...

    JS时间控件,JS时间控件

    在网页开发中,JavaScript(JS)时间控件是一种常见的交互元素,它允许用户方便地选择日期和时间。这种控件通常用于表单填写、事件安排或任何需要用户输入时间信息的场景。本压缩包包含了一个JS时间控件的实现,包括...

    JS禁用页面上所有控件的实现方法(附demo源码下载)

    在JavaScript中,禁用页面上所有控件是一个常见的需求,特别是在需要锁定用户界面或执行某些操作时。这个过程涉及到对不同类型的HTML元素进行遍历,并分别设置它们的`disabled`属性来达到禁用的效果。本篇文章将深入...

    js实现遍历含有input的table实例

    本文将深入探讨如何使用JavaScript来遍历含有input的table,并结合实例讲解如何利用jsp读取数据库动态生成表格,以及JavaScript遍历table的相关技术。 首先,我们来看一个典型的HTML表格结构,如以下代码所示: ``...

    javascript 树形控件

    JavaScript树形控件是一种在网页中用于展示层次结构数据的交互式组件,它通常以节点的形式呈现,每个节点可以展开或折叠,展示其子节点。这种控件在各种应用场景中非常常见,例如文件目录浏览、组织结构展示、菜单...

    javascript表单控件实例讲解.docx

    在本文中,我们将详细介绍了 javascript 表单控件实例的使用方法和实现原理,主要包括遍历表单的全部控件、通过控件名访问特定的控件、猎取表单内文本框的个数、修改表单的提交方法等多个实例。 实例一:遍历表单的...

    js职业选择控件

    "js职业选择控件"通常指的是利用JavaScript技术开发的用于用户在网页上进行职业选择的交互式组件。这类控件在招聘网站、在线教育平台或职业规划工具中非常常见,它们能帮助用户方便地浏览、筛选和选择不同的职业路径...

Global site tag (gtag.js) - Google Analytics