bijian1013
bijian1013

getElementById的用法

        getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。

       返回具有指定ID属性值的第一个对象的一个引用。

       语法：

       Element = document.getElementByIdx_x_x(“id”)

       获得ID值=id的所有属性和方法

       JS中经常使用它通过控件ID取得元素的值，如一个form里包含text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。

 

    实例1：

<html>
  <head>
  </head>
  <body>
    <input id="inTag" name="inName" value="bijian" type="text" />
    <input type="submit" value="获取值" onClick="getValue()"/>
  </body>
  <script language="javascript">
     window.onload = function run(){   
         var inTag = document.getElementByIdx_x("inTag"); 
                  inTag.value = "hello!";
     }
    
     function getValue() {
              var inTag = document.getElementByIdx_x("inTag");
              alert(inTag.value);
     }
  </script>
</html>

 

    实例2：

<html>
  <head>
      <title>getElementById</title>
  </head>
  <body>
    <a id="mr" href="http://www.baidu.com/">百度</a>
    <form name="myform">
        <input type="button" value="更换连接" onClick="change()"/>
    </form>
  </body>
  <script language="javascript">
     function change() {
             document.getElementByIdx_x("mr").innerHTML = "金山123";
             document.getElementByIdx_x("mr").href="http://123.duba.net/";
     }
  </script>
</html>

   

    实例3：

<html>
  <head>
      <title>getElementById</title>
  </head>
  <body>
    <h1 id="divTest" onmousemove="s()" onmouseout="reset()" align="center">这是一个有感觉的标记</h1>
  </body>
  <script language="javascript">
     function reset() {
             var divTest = document.getElementByIdx_x("divTest");
             divTest.innerHTML = "这是一个有感觉的标记";
     }
     function s()  {
             var divTest = document.getElementByIdx_x("divTest");
             divTest.innerHTML = "老鼠来了";
     }
  </script>
</html>

   

    实例4：

<html>
  <head>
      <title>getElementById4</title>
  </head>
  <body>
    <font ID=main_title size=6><b>虚拟网络世界</b></font>
  </body>
  <script language="javascript">
     var n = 0;
     function changefontcolor() {
             n=n%4;
             switch(n) {
                 case 0:
                         main_title.color="red";
                         break;
                 case 1:
                         main_title.color="green";
                         break;
                 case 2:
                         main_title.color="blue";
                         break;
                 case 3:
                         main_title.color="yellow";
             }
             n++;
     }
     //定时执行函数每秒钟调用changefontcolor()函数一次，改变大标题的颜色
     setInterval("changefontcolor()",1000);
  </script>
</html>

   

    实例5：

<html>
  <head>
      <title>getElementById5</title>
  </head>
  <body onKeypress="showCapture()">
    <h1 ID="num" align="center">0000</h1>
  </body>
  <script language="javascript">
       var r;
       function showNextNum() {
               var m_num=Math.floor(Math.random()*(3000-1000))+1000;
               num.innerHTML = m_num;
       }
       function showCapture() {
               clearTimeout(r);
       }
     r = setInterval("showNextNum()",100);
  </script>
</html>

你可能感兴趣的:(element)

  • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
  • el-dialog宽度自适应 STATICHIT静砸 JavaScriptvue.jselementuijavascript自适应
    最近在自适应上做了很多功夫其中有一个是，在使用element-plus的el-dialog时，在pc端和在手机端打开，由于屏幕宽度的不同，我希望el-dialog的宽度是不一样的。而el-dialog设置宽度是通过width属性，直接用%来相对窗口设置宽度。我先后尝试了媒体查询，监听屏幕宽度和监听视口宽度来自适应。1️⃣首先，直接给el-dialog设置自定义class结合媒体查询是无效的，直接设
  • max_element()和min_element()函数及用法介绍 藕粉和藕片 数据结构c++
    头文件：algorithminta[]={1,4,7,2,8,9,3,5};1.max_element（first,last）作用：返回数组区间[first，last）中最大元素的位置用法：intt=max_element(a,a+8)-a;//注意要减去a本身的地址cout<
  • Element-UI中el-time-picker时间选择器无法选择 爱健身的小刘同学 bugElementVue系列javascript前端elementui
    前言前几天开发时，在做一个时间选择时，遇到了无法选中时间的问题在网络上找了解决方法，特此记录一下解决方法我的代码结构营业时间时间选择不上的原因是因为初始值问题很有可能是最开始赋值为空数组了所以有3个解决方法1.设置为nullbusinessTimeInfo:null2.设置当前时间businessTimeInfo:[newDate(newDate()),newDate(newDate())]（默认
  • COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript开发语言ecmascript
    Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
  • 程序员开发技术整理 laizhixue 学习前端框架
    前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
  • java selenium 元素点击不了 马达马达达 selenium测试工具
    最近做了一个页面爬取，很有意思被机缘巧合下解决了。这个元素很奇怪，用xpath可以定位元素，但是就是click()不了。试过了网上搜的一些办法：//尝试一WebElementa_tag=driver.findElement(By.xpath("xxx"));a_tag.click();//点击不了，卡住//尝试二WebDriverWaitwait=newWebDriverWait(driver,1
  • 【Vue】elementUI-MessageBox组件相关 SZnA1 vue.jselementui前端
    官方代码：点击打开MessageBoxexportdefault{methods:{open(){this.$confirm('此操作将永久删除该文件,是否继续?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(()=>{this.$message({type:'success',message:'
  • vue3 + Element + nodejs 大文件上传、断点续传 ZL随心 vue.js前端javascript
    前言大文件上传，一般时间都比较长，这么长的时间内，可能会出现各种各样的问题，比如断网，一旦出错，我们的文件就需要重新上传，这样造成资源浪费，如果我们使用了断点续传继续就不会造成资源浪费了，因为当出现错误的时候，我们再重新上传文件，就会从我们出现错误的地方开始上传了，对于出错前上传的内容就不用再上传了，对于已经上传过的文件，就可以实现秒传的效果了。完整仓库地址流程1、上传方法constonUploa
  • 突破编程_C++_面试（STL 编程 stack） breakthrough_01 突破编程_C++_面试c++面试
    1请简述std::stack在C++STL中的基本功能和使用场景std::stack在C++STL（标准模板库）中是一个容器适配器，专门用于实现后进先出（LIFO，Last-In-First-Out）的数据结构。其基本功能和使用场景如下：基本功能：push(element)：向栈顶添加元素。pop()：移除栈顶元素。如果栈为空，则此操作可能会导致未定义行为。top()：返回栈顶元素的引用，但不移除
  • leetcode 347.前k个常见的元素 沉靥 #blind75（第一轮）leetcode算法python笔记
    leetcode347.前k个常见的元素参考资料[blind75](Practice(neetcode.io))，[代码随想录](代码随想录(programmercarl.com))一、力扣[第347题](TopKFrequentElements-LeetCode)有序数组的平方（[视频链接](TopKFrequentElements-BucketSort-Leetcode347-Python(y
  • react可视化编辑器 第五章 升级版 拖拽、缩放、转圈、移动 zhooson react.js编辑器前端
    本章代码结构：主入口Test.tsx,组件：ResizeControl.tsx本章花费俩天时间完成代码例子，单独抽离代码封装好一个ResizeControl组件，拿来即用。代码中constdomObj=document.getElementById(resize-item-${startPos.id})这句是关键代码，不然获取的dom节点有问题，导致多个红色div操作时候会重叠ResizeCont
  • vue+elementUI用户修改密码的前端验证 zj_zjk_sjz vue.js前端elementuijavascript
    用户登录后修改密码，密码需要一定的验证规则。旧密码后端验证是否正确；前端验证新密码的规范性，新密码规范为：6-16位，至少含数字/字母/特殊字符中的两种；确认密码只需要验证与新密码是否一致；弹窗结构取消确认form验证规则passRules:{oldPassword:[{required:true,message:'请输入旧密码',trigger:'blur'}],newPassword:[{va
  • Playwright中locator() 方法快速定位网页元素[全面总结] 铁松溜达py 前端javascripthtmlpython
    Playwright是一个用于浏览器自动化的库，它支持多种浏览器和多种语言。在Playwright中，`page.locator()`方法用于创建一个元素定位器（ElementLocator）。元素定位器是一个强大的工具，可以帮助你在页面上找到并操作元素。------------page.locator(selector)page.locator(selector,**kwargs)Playwri
  • vue+elementUI实现右击指定表格列的单元格显示选择框 yuhuamei vue.jselementui前端
    一、template代码如下：1、表格单元格中添加的代码：{{scope.row[item.prop]}}2、右键时弹出的选择框代码选择铁心级号全选显示-->隐藏js代码如下：//铁心级号选择时handleCheckedChange:function(val){letcheckedCount=val.length;this.checkAll=checkedCount===this.coreLeve
  • C语言经典面试题目（十五） Masami22 C语言面试题目c语言面试开发语言职场和发展
    1、如何在C语言中实现堆数据结构？在C语言中，可以通过动态内存分配来实现堆数据结构。一种常见的方式是使用数组来表示堆，并使用堆的性质来维护数组的结构。以下是一个简单的堆数据结构的示例：#include#include#defineMAX_HEAP_SIZE100typedefstruct{int*elements;intsize;intcapacity;}Heap;Heap*createHeap(
  • 代码随想录算法训练营第三天 | 203.移除链表元素，707.设计链表 206.反转链表 B七.七.七J 算法链表数据结构
    203.移除链表元素https://leetcode.cn/problems/remove-linked-list-elements/description/1.不带表头法因为是不带表头的，所以要区分两种情况，第一种是要删除的链表元素就是表头的元素，这里假设有多个要删除的元素，所以应该是while(head!=NULL&&head->val==val)用的是while循环的方式，而不是If的形式，
  • html行内元素（内联元素），块级元素分别有哪些？ 王 歪歪 基础知识html前端
    html行内元素（内联元素），块级元素分别有哪些？常用的分类包括行内元素（内联元素）和块级元素。下面是它们的示例列表：行内元素（InlineElements）：内联元素（InlineElements）是行内元素的另一个术语，它们的行为和显示方式与行内元素相似。块级元素（Block-levelElements）：到标题和列表列表项表格表单、、等语义化元素、、等语义化元素块级元素在默认情况下会在新行上
  • React 测试库 - API liangshanbo1215 TestingLibraryreact.js前端前端框架单元测试
    ReactTestingLibrary也会重新导出DOMTestingLibrary中的所有内容如以下方法：renderfunctionrender(ui:React.ReactElement,options?:{/*Youwon'toftenusethis,expandbelowfordocsonoptions*/},):RenderResult渲染到到document.body的容器中。imp
  • vue element input让浏览器不保存密码 niesiyuan000 vue.jselementuijavascript
    从网上看了很多，比如auto-complete="new-password"比如autocomplete="off"这是真的用不了啊，最后用css可以实现1、html2、datareach__vioSecretkey:'',//违纪秘钥reach__seePwd:false,3、methodsseePwd(){this.reach__seePwd=!this.reach__seePwd},4、cs
  • el-popover 实现1个组件在页面上复用 maotou526 elementuijavascript前端elementui
    个人需求：点击dom展示出该行数据的详细信息。解决方案：使用elementui的对话框组件或者弹出框组件。疑问：elementui官方文档上的弹出框组件针对于每个dom都需要套一个。这个太蠢了，忍不住重点：pop组件中有一个referenceElm属性可以调整关联的dom元素（就是希望点击哪个dom出现弹层的那个dom）//组件配置//方法openDetail(item){this.selecte
  • 【elementui】一招解决 el-table 重复写 loading 的问题 落落叶叶无声 elementuielementuiel-tableloading重复前端
    问题项目中使用elementui开发表格的小伙伴知道，给el-table添加加载动画一般都是用v-loading指令，同时组建中添加loading变量来控制。可是当表格越来越多时，每次都必须加一个loading变量同时在请求数据的方法中必须耦合loading的控制逻辑。太多的重复工作，既降低效率，也使得代码难于维护。解决方法使用Mixin+Proxy第一步，创建loading.js作为mixin，
  • Unity3D多线程UI之滚动框数据和模型绑定 胡强_79a4
    先附上git地址https://github.com/huqiang0204/huqiang.UnitySubThreadUI首先声明一个需要反射的模型类classItem//模型UI可自行定制{publicTextElementText;}然后创建一个数据集合，可以是IList，Array和FakeArray声明一组数据，并且绑定到滚动框上ListtestData=newList();//数据的
  • jQuery ready 和 window.onload 的区别 BluesCurry
    执行时间：window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(element).ready()是DOM结构绘制完毕后就执行，不必等到页面所有元素加载完毕。编写方法个数不同：window.onload不能同时编写多个，如果有多个window.onload方法只会执行一个。$(element).ready()可以同时编写多个，并且都可以得到执行。注：$(document)
  • Element-UI穿梭框去掉左箭头按钮 太空漫步11 vuejqueryelementui
    往vue项目中加入一个穿梭框页面首先在views目录中创建Transfer.vue文件：import$from'jquery'exportdefault{mounted(){console.log('mounted');$('.el-transfer__buttons').children().first().remove();},data(){constgenerateData=_=>{cons
  • 基于Java+SpringBoot+vue+element疫情物资捐赠分配系统设计和实现 央顺技术团队 成品程序项目javaspringbootvue.js毕业设计开发语言后端
    基于Java+SpringBoot+vue+element疫情物资捐赠分配系统设计和实现作者主页央顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式文章目录基于Java+SpringBoot+vue+element疫情物资捐赠分配系统设计和实现一、前言介绍：二、系统设计：2.1系统设计规则：2.2系统整体架构：2.3系统功能设计：2.4登录时序图设计：三、功能截图：3.1登录注册模块：3.2用户首页
  • 基于Java+SpringBoot+vue+element实现婚纱摄影网系统 央顺技术团队 成品程序项目javaspringbootvue.js后端开发语言
    基于Java+SpringBoot+vue+element实现婚纱摄影网系统作者主页央顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式文章目录基于Java+SpringBoot+vue+element实现婚纱摄影网系统前言介绍：系统设计：系统功能结构设计功能截图：登录注册：前台首页：后台管理：代码实现：论文参考：前言介绍：随着现代网络技术发展，对于婚纱摄影网的设计现在正处于网络发展的阶段，所以对它
  • 基于Java+SpringMVC+vue+element宠物管理系统设计实现 央顺技术团队 成品程序项目javavue.js宠物数据库mybatis前端springboot
    基于Java+SpringMVC+vue+element宠物管理系统设计实现博主介绍：5年java开发经验，专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域作者主页央顺技术团队Java毕设项目精品实战案例《1000套》欢迎点赞收藏⭐留言文末获取源码联系方式文章目录基于Java+SpringMVC+vue+element宠物管理系统设计实现一、前言介绍：二、系统
  • pypbc双线性对库的使用 一定会成为大牛的小宋 python密码学
    pypbc是python中使用双线性配对运算的库，在密码学中双线性对是经常使用到的运算。pypbc的安装请参照ubuntu16.04安装pypbc库pypbc中提供了Parameters、Pairing、Element三个类Parameters生成参数：由于是在椭圆曲线上生成的双线性对，PBC库提供了几种不同的曲线，pypbc一般取的是a类曲线，具体参照PBCLibraryManual0.5.14
  • 基于Java+SpringBoot+vue+element实现前后端分离玩具商城系统 央顺技术团队 成品程序项目javaspringbootvue.js毕业设计spring后端
    基于Java+SpringBoot+vue+element实现前后端分离玩具商城系统博主介绍：5年java开发经验，专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域作者主页央顺技术团队Java毕设项目精品实战案例《1000套》欢迎点赞收藏⭐留言文末获取源码联系方式文章目录基于Java+SpringBoot+vue+element实现前后端分离玩具商城系统前言介
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他