<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #item{

                 width: 200px;

             }

         </style>

     </head>

     <body>

     <!--第一种元素获取方法：

        可以使用内置对象document上的getElementById

     方法来获取页面上设置了id属性的元素，获取到的

     是一个html对象，然后将它赋值给一个变量-->

     <div id="item" style="">123</div>

     <div id="item1" style="">456</div>

     <input type="radio" value="0" name="zzz" id = "biaodan">表单</input>

     <input type="radio" value="1" name="zzz" id = "biaodan1">表单</input>

     <!--<input type="checkbox" value="0" name="zzz">表单</input>-->

     <script>

          var odiv = document.getElementById('item').textContent;

          console.log(odiv);

     </script>

     <!--第二种元素获取方法：

     将JavaScript语句放到window.onload触发的函数里面

     获取元素的语句会在页面加载完后才执行，就不会出错

     window指js当中最大的对象，代表窗口

     onload指页面加载完成之后

     -->

     <script type="text/javascript">

           var odiv1;

           var odiv2;

           var odiv3;

           var odiv4;

           var odiv5;

           window.onload = function(){

                odiv1 = document.getElementById('item').textContent;

                console.log(odiv1);

                odiv2 = document.getElementById('item');

                //odiv2.style.width = "200px";

                odiv2.style.height= "200px";

                odiv2.style.backgroundColor = "yellow";

                odiv2.style.fontSize = "30px"

 //               修改文本内容的两种方式

                odiv2.textContent = 111;

                odiv4 = document.getElementById('item1');

                odiv4.innerText = '<h1>333</h1>';/*innerText可用于解析文本，也可用于获取文本*/

                odiv4.innerHTML = '<h1>222</h1>';/*innerText可用于解析标签，也可用于获取标签*/

 //               在设置样式的时候,如果有些属性是双拼词background-color等要把中间的'-'换成第二单词的首字母大写

                //此处获取不到宽度。因为js获取样式只能获取行间样式，不能获取在head标签内写的CSS样式

                odiv3 = document.getElementById('item').style.width;

                console.log(odiv3);

 //             表单的元素获取：

                odiv5 = document.getElementById('biaodan');

                console.log(odiv5.value);

                odiv5.value=1;

                console.log(odiv5.value)

           }

     </script>

     <!--注意：script代码段要在所获取元素代码段的下边才能获取到元素。一般建议把script代码放在所有html代码的最下面或者是用window.onload-->

     </body>

 </html>

JS-05-元素获取的更多相关文章

  1. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  2. 中高级前端应该必会，js实现事件委托代理、切换样式、元素获取相对于文档位置等

    1.介绍 随着组件开发大流行,现在三大框架已经基本占领了整个前端. 这时候,我们要是引入一个 jq 是不是先得你的项目非常臃肿,jq 也很不适合. 这个时候,你就需要来增加你 js 的功底. 2.各种 ...

  3. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  4. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  5. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  7. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  8. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  9. js和jquery获取属性的区别

    一.获取元素: js获取元素: 根据id获取:document.getElementById("id"); 根据类名获取:document.getElementsByClassNa ...

  10. jquery/js iframe 元素操作

    1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...

随机推荐

  1. HDU4528 小明捉迷藏 [搜索-BFS]

    一.题意 小明S在迷宫n*m中找大明D和二明E,障碍物X不能走,问你计算是否能在时间t内找到大明和二明 二.分析 2.1与普通的BFS不同,这里可以走回头路,这里应该建立四维的标记数组标记数组,例如v ...

  2. AS优化

    第一步:打开AS安装所在的位置,用记事本打开“红色框”选中的文件. 如图: 第二步:打开“studio64.exe.vmoptions”文件后修改里面的值,修改后如下: 1 2 3 4 5 6 7 8 ...

  3. CentOS 7防火墙

    CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙步骤. 1.关闭firewall: systemctl stop firewalld.service #停止f ...

  4. 模型正则化，dropout

    正则化 在模型中加入正则项,防止训练过拟合,使测试集效果提升 Dropout 每次在网络中正向传播时,在每一层随机将一些神经元置零(相当于激活函数置零),一般在全连接层使用,在卷积层一般随机将整个通道 ...

  5. cookies 与session

    cookies :存放在浏览器(客户端)的用户信息 - 优点: 可以将数据存在客户端一方: - 缺点: 不安全,可以存放多份,导致服务端占用空间过大 session :存放在服务端的用户信息 - 优点 ...

  6. 洛谷$P4768\ [NOI2018]$归程 $kruscal$重构树

    正解:$kruscal$重构树 解题报告: 传送门$QwQ$ 语文不好选手没有人权$TT$连题目都看不懂真的要哭了$kk$ 所以先放个题目大意?就说给定一个$n$个点,$m$条边的图,每条边有长度和海 ...

  7. java poi ppt 接口的基本操作

    依赖 在 pom.xml中增加以下依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId& ...

  8. CSRF绕过后端Referer校验

    CSRF绕过后端Referer校验分正常情况和不正常的情况,我们这里主要讨论开发在写校验referer程序时,不正常的情况下怎么进行绕过. 正常情况 正常的情况指服务器端校验Referer的代码没毛病 ...

  9. Java小项目之：五子棋，你下棋下得过电脑吗？

    Java小项目之:五子棋,你下棋下得过电脑吗? Java五子棋功能要求: 1.创建窗口和设计一个棋盘界面 2.实现鼠标点击,棋子出现,黑白棋轮流下 3.能够判断五子相连输赢 4.添加重新开始,悔棋,退 ...

  10. 【一起学源码-微服务】Feign 源码一：源码初探，通过Demo Debug Feign源码

    前言 前情回顾 上一讲深入的讲解了Ribbon的初始化过程及Ribbon与Eureka的整合代码,与Eureka整合的类就是DiscoveryEnableNIWSServerList,同时在Dynam ...