zoukankan      html  css  js  c++  java

  • 05_进一步操作页面的元素及自定义属性

    前面复习：

    获取文档中对象的方法：

    操作标签的属性：

    操作元素的样式：

    案例：

    前提：

    js/common.js代码如下：

    1 /**
2  * 根据id 或者根据tagName 返回相应的元素
3  * */
4 function getId$(id){
5    return document.getElementById(id);
6 }
7 function getTags$(tagName) {
8     return document.getElementsByTagName(tagName)
9 }

    点击按钮禁用/启用文本框：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="禁用" id="btn">
 9         <input type="text" value="文本框" id="text" >
10         <script src="js/common.js"></script>
11         <script>
12             getId$('btn').onclick = function () {
13                 if (this.value =='禁用'){
14                     getId$('text').disabled = true;
15                     this.value = '开启';
16                 }else{
17                     getId$('text').disabled = false;
18                     this.value = '禁用';
19                 }
20             };
21         </script>
22     </body>
23 </html>
    View Code

    点击按钮修改列表背景颜色：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="改变背景颜色" id="btn">
 9         <ul id="ulist">
10             <li>河南</li>
11             <li>江西</li>
12             <li>吉林</li>
13             <li>北京</li>
14             <li>深圳</li>
15         </ul>
16 
17         <script src="js/common.js"></script>
18         <script>
19             getId$('btn').onclick = function () {
20                 getId$('ulist').style.backgroundColor="cyan";
21             };
22         </script>
23     </body>
24 </html>
    View Code

    阻止超链接   默认的跳转：

    它用的是return false .

    这样默认的跳转就不会跳转了。

    第一种写法：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8 <!--        <a href="https://www.baidu.com" onclick="alert('弹框了.....')">百度</a>-->
 9 <!--        如何让 弹框之后 也不跳转到百度页面呢？-->
10 <!--        使用return false-->
11         <a href="https://www.baidu.com" onclick="alert('弹框了...'); return false ">百度</a>
12     </body>
13 </html>
    View Code

    第二种写法：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8 
 9         <a href="https://www.baidu.com" onclick="return f1()">百度</a>
10 <!--        注意：onclick 中写的是 return  f1()   其实就是return false-->
11         <script>
12             function f1() {
13                 alert('弹框了...');
14                 return false;
15             }
16         </script>
17     </body>
18 </html>
    View Code

    第三种写法：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8         <a href="https://www.baidu.com" id="a">百度</a>
 9         <script src="js/common.js"></script>
10         <script>
11             getId$('a').onclick = function () {
12                 alert('弹框了...');
13                 console.log("hahhahahha");
14                 return false;
15             };
16         </script>
17     </body>
18 </html>
    View Code

    总之一句话就是要在相应事件中  return false 。 

    点击小图显示大图（不跳转的）：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <a href="images/1.png" id="a"><img src="images/1.png" width="100" alt=""></a>
10         <img src="" alt="" id="big-img">
11         <script src="js/common.js"></script>
12         <script>
13             getId$('a').onclick = function () {
14                 getId$('big-img').src = this.href;
15                 //阻止它跳转
16                 return false;
17             };
18         </script>
19     </body>
20 </html>
    View Code

    美女画廊：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             *{
 8                 margin:0;
 9                 padding:0;
10             }
11             .main{
12                 width: 450px;
13                 height: 550px;
14                 margin: 0 auto;
15             }
16             #imageGallery{
17                 width: 400px;
18                 height: 100px;
19                 display: inline-block;
20             }
21             #imageGallery img{
22                 width: 100px;
23                 height: 100px;
24             }
25             #imageGallery li{
26                 float: left;
27                 list-style: none;
28             }
29             #imageGallery img:hover{
30                 border:1px solid palevioletred;
31                 width: 98px;
32                 height: 98px;
33             }
34             #big-img{
35                 width: 400px;
36                 height: 400px;
37                 background-color: cyan;
38                 display: block;
39             }
40 
41 
42         </style>
43     </head>
44     <body>
45         <div class="main">
46             <h2>美女画廊</h2>
47             <ul id="imageGallery">
48             <li><a href="images/0.png" title="美女A">
49                 <img src="images/0.png"  alt="美女A">
50             </a>
51             </li>
52             <li>
53                 <a href="images/1.png" title="美女B">
54                     <img src="images/1.png"  alt="美女B">
55                 </a>
56             </li>
57             <li>
58                 <a href="images/2.png" title="美女C">
59                     <img src="images/2.png"  alt="美女C">
60                 </a>
61             </li>
62             <li>
63                 <a href="images/3.png" title="美女D">
64                     <img src="images/3.png"  alt="美女D">
65                 </a>
66             </li>
67         </ul>
68 <!--        下面显示大图-->
69             <img id="big-img" src="" alt="">
70             <p id="p">选择一个图片</p>
71         </div>
72         <script src="js/common.js"></script>
73         <script>
74             //获得所有的a标签 对象
75             var aObjs = getId$("imageGallery").getElementsByTagName("a");
76             //循环
77             for(var i =0 ;i<aObjs.length;i++){
78                 //为每个 a 注册事件
79                 aObjs[i].onclick = function () {
80                     //将当前a 的href 赋给 大图的src
81                     getId$('big-img').src = this.href;
82                     //给p 标签修改文字
83                     getId$('p').innerText = this.title;
84                     //阻止跳转
85                     return false;
86                 };
87             }
88         </script>
89     </body>
90 </html>
    View Code

    隔行变色：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="隔行变色" id="btn">
 9         <ul id="ulist">
10             <li>奥迪</li>
11             <li>凯迪拉克</li>
12             <li>奔驰</li>
13             <li>宝马</li>
14             <li>兰博基尼</li>
15             <li>红旗</li>
16             <li>大众</li>
17             <li>哈弗</li>
18         </ul>
19 
20         <script src="js/common.js"></script>
21         <script>
22             getId$('btn').onclick = function () {
23                 var liObjs = getId$('ulist').getElementsByTagName('li');
24                 for(var i =0;i<liObjs.length;i++){
25                     liObjs[i].style.backgroundColor ='red';
26                     if(i %2==1){
27                         liObjs[i].style.backgroundColor = 'yellow';
28                     }
29                 }
30             };
31 
32         </script>
33     </body>
34 </html>
    View Code
     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="隔行变色" id="btn">
 9         <ul id="ulist">
10             <li>奥迪</li>
11             <li>凯迪拉克</li>
12             <li>奔驰</li>
13             <li>宝马</li>
14             <li>兰博基尼</li>
15             <li>红旗</li>
16             <li>大众</li>
17             <li>哈弗</li>
18         </ul>
19 
20         <script src="js/common.js"></script>
21         <script>
22             getId$('btn').onclick = function () {
23                 var liObjs = getId$('ulist').getElementsByTagName('li');
24                 for(var i =0;i<liObjs.length;i++){
25                     liObjs[i].style.backgroundColor = i%2==0 ? "red":"yellow";
26                 }
27             };
28         </script>
29     </body>
30 </html>
    better version

    列表的高亮显示：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11 
12 
13         </style>
14 
15 
16     </head>
17     <body>
18         <ul id="ulist">
19             <li>奥迪</li>
20             <li>凯迪拉克</li>
21             <li>奔驰</li>
22             <li>宝马</li>
23             <li>兰博基尼</li>
24             <li>红旗</li>
25             <li>大众</li>
26             <li>哈弗</li>
27         </ul>
28 
29         <script src="js/common.js"></script>
30         <script>
31             var liObjs = getId$('ulist').getElementsByTagName('li');
32             for (var i =0;i<liObjs.length;i++){
33                 console.log(liObjs[i]);
34                 //为每个li  注册两个鼠标事件
35                 //1 进入事件 enter
36                 liObjs[i].onmouseenter = function () {
37                     this.style.backgroundColor = 'yellow';
38                 };
39                 //2 离开事件 leave 
40                 liObjs[i].onmouseleave = function () {
41                     this.style.backgroundColor = ''; //恢复默认的颜色
42                 };
43             }
44         </script>
45     </body>
46 </html>
    View Code

     

    获取元素的方式：

    最常见的获取元素的方式：是通过getElementById()  和 getElementsByTagName().   这在前面已经说过。

    下面是其他的方式： 

    根据name属性值 获取元素：

    基础的标签是没有name 属性的，例如div 等没有 name 属性，

    主要是表单属性有name 属性 。 

    所以，这里可以通过使用document.getElementsByName ()直接获得name的远的元素。

    案例：点击按钮修改所有name 属性值为 name1 的文本框。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <input type="button" value="显示效果" id="btn"><br />
10         <input type="text" value="你好"  name="name1"><br />
11         <input type="text" value="你好"  name="name3"><br />
12         <input type="text" value="你好"  name="name5"><br />
13         <input type="text" value="你好"  name="name1"><br />
14         <input type="text" value="你好"  name="name0"><br />
15         <input type="text" value="你好"  name="name3"><br />
16         <input type="text" value="你好"  name="name1"><br />
17         <script src="js/common.js"></script>
18         <script>
19             getId$('btn').onclick = function () {
20                 var name1List = document.getElementsByName('name1');  //这里只是针对表单表标签，它们有Name属性
21                 for (var i = 0;i<name1List.length;i++){
22                     name1List[i].value = "我很好";
23                 }
24             };
25         </script>
26     </body>
27 </html>
    getElementsByName() 的使用

    根据类样式的名字 获取元素：

    getElementsByClassName （）  注意这个方法是在H5中才出现的。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6 
 7         <style>
 8             div{
 9                 width: 200px;
10                 height: 50px;
11                 margin-top: 10px;
12             }
13             .cls{
14                 background-color: cyan;
15             }
16         </style>
17 
18 
19     </head>
20     <body>
21         <p>这就是个p</p>
22         <p class="cls">这是第二个p</p>
23         <span>这是第一个span</span> <br>
24         <span class="cls">这是第二个span</span> <br>
25         <div>这是第一个div </div>
26         <div class="cls">这是第二个div</div>
27         <input type="button" value="显示效果" id="btn">
28 
29         <script src="js/common.js"></script>
30 
31         <script>
32             //需求是 点击按钮  改变cls类样式的 背景颜色为  红色
33             getId$('btn').onclick = function () {
34                 var clsObjs = document.getElementsByClassName('cls');
35                 for (var i = 0;i<clsObjs.length;i++){
36                     clsObjs[i].style.backgroundColor = 'red';
37                 }
38             };
39 
40         </script>
41     </body>
42 </html>
    View Code

    其余的获取元素方式及总结：

    1,querySelector（） 

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         
 7     </head>
 8         <input type="button" value="显示效果" id="btn">
 9         <script src="js/common.js"></script>
10         <script>
11             document.querySelector('#btn').onclick = function () {
12                 alert("我又出来了");   
13             };
14 
15         </script>
16     </body>
17 </html>
    View Code

    注：它拿到的是一个！  获取id 

    2,querySelectorAll（） 

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             .cls{
 8                 background-color: yellow;
 9             }
10         </style>
11     </head>
12     <body>
13         <p>这就是个p</p>
14         <p class="cls">这是第二个p</p>
15         <span>这是第一个span</span> <br>
16         <span class="cls">这是第二个span</span> <br>
17         <div>这是第一个div </div>
18         <div class="cls">这是第二个div</div>
19         <input type="button" value="显示效果" id="btn">
20 
21         <script src="js/common.js"></script>
22 
23         <script>
24             var clsObjs =  document.querySelectorAll('.cls');
25             getId$('btn').onclick = function () {
26                 for (var i =0 ;i<clsObjs.length;i++){
27                     clsObjs[i].style.backgroundColor = 'red';
28                 }
29             };
30         </script>
31     </body>
32 </html>
    View Code

    注：它拿到的是多个。获取class 

    总结：

    偶尔还会用下className .

    案例：

    div高亮显示：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             *{
 8                 margin:0;
 9                 padding:0;
10             }
11             div{
12                 width: 100px;
13                 height: 50px;
14                 background-color: yellowgreen;
15                 float: left;
16                 margin-left: 10px;
17 
18                 border: 1px solid yellowgreen;  /*它可以使得 下面高亮的时候不抖动  鼠标经过的时候无非是将已有边框从蓝色变为红色*/
19             }
20 
21         </style>
22     </head>
23     <body>
24         <div></div>
25         <div></div>
26         <div></div>
27         <div></div>
28         <div></div>
29         <script src="js/common.js"></script>
30 
31         <script>
32             var objs = document.getElementsByTagName('div');
33             for (var i =0 ;i<objs.length; i++){
34                 //鼠标进入 事件
35                 objs[i].onmouseenter = function () {
36                     this.style.border ="1px solid red";
37                 };
38                 //鼠标离开 事件
39                 objs[i].onmouseleave = function () {
40                     this.style.border = "";
41                 }
42 
43             }
44         </script>
45     </body>
46 </html>
    View Code

    模拟搜索框：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             input{
 8                 color:gray;
 9             }
10         </style>
11     </head>
12     <body>
13         <input type="text" value="请输入内容" id="text">
14 
15         <script src="js/common.js"></script>
16         <script>
17             //获取文本框
18             getId$('text').onfocus = function () { //获取焦点
19                 this.value = this.value =="请输入内容"?"":this.value;
20 
21             };
22             getId$('text').onblur = function () {// onblur 失去焦点
23                 this.value = this.value == ""?"请输入内容":this.value;
24             };
25         </script>
26     </body>
27 </html>
    View Code
     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             input{
 8                 color:gray;
 9             }
10         </style>
11     </head>
12     <body>
13         <input type="text" value="请输入内容" id="text">
14 
15         <script src="js/common.js"></script>
16         <script>
17             //获取文本框
18             getId$('text').onfocus = function () { //获取焦点
19                 if(this.value == "请输入内容"){
20                     this.value = "";
21                     this.style.color = 'black';
22                 }
23             };
24             getId$('text').onblur = function () {// onblur 失去焦点
25                 if(this.value == ""){ //等价于 this.value.length == 0  
26                     this.value = "请输入内容";
27                     this.style.color = 'gray';
28                 }
29             };
30         </script>
31     </body>
32 </html>
    better version

    验证文本框长度：

    要求输入的长度在 6 -10 以内，超出的背景变红！  

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <input type="text" value="" id="text">
10         <script src="js/common.js"></script>
11         <script>
12             //获取文本框
13             getId$('text').onblur =function () {
14                 if(this.value.length >=6 && this.value.length <= 10){
15                     this.style.backgroundColor = "";
16                 }else{
17                     this.style.backgroundColor = "red";
18                 }
19             }
20         </script>
21     </body>
22 </html>
    View Code

    innerText 和 textContent的区别 ：

    下面写兼容代码：

    它的主要依据就是根据相应的属性是否存在。如果不存在它的类型是underfinded.

    innerText 和 innerHTML的区别 ：

    innerHTML  是有标签效果的。

    自定义属性：

    自定义属性初识：

    自定义属性是不能通过this 得到的

    自定义属性要通过 this.getAttribute() 来获取

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11         </style>
12     </head>
13     <body>
14         <ul>
15             <li gdp="99">河南GDP</li>
16             <li gdp="88">河北GDP</li>
17             <li gdp="77">山东GDP</li>
18             <li gdp="66">江西GDP</li>
19             <li gdp="55">吉林GDP</li>
20         </ul>
21         <script src="js/common.js"></script>
22         <script>
23             var liObjs = document.getElementsByTagName('li');
24             for (var i =0 ;i< liObjs.length ;i++){
25                 liObjs[i].onclick = function () {
26                     // alert(this.gdp);  //自定义属性是不能通过this 得到的
27                     alert(this.getAttribute('gdp')); //自定义属性要通过 this.getAttribute() 来获取
28                 };
29             }
30         </script>
31     </body>
32 </html>
    View Code

    自定义属性设置和获取：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11         </style>
12     </head>
13     <body>
14         <ul>
15             <li >河南GDP</li>
16             <li >河北GDP</li>
17             <li >山东GDP</li>
18             <li >江西GDP</li>
19             <li >吉林GDP</li>
20         </ul>
21         <script src="js/common.js"></script>
22         <script>
23             var liObjs = document.getElementsByTagName('li');
24             for (var i =0 ;i< liObjs.length ;i++){
25                 // liObjs[i].gdp = (i+1)*10;  //此方式自定义的属性在DOM对象上，不在标签中
26                 liObjs[i].setAttribute("gdp",(i+1)*10);  //它可以
27 
28                 //点击每个表情时 显示对应的值
29                 liObjs[i].onclick = function () {
30                     alert(this.getAttribute("gdp"));
31                 };
32             }
33         </script>
34     </body>
35 </html>
    View Code

    也可以移除自带的属性。

    我们知道，移除类样式，可以通过赋空，也可以将其移除：

    综合案例 ：tab切换实现：

      1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>我是网页标题</title>
  6         <style>
  7             *{
  8                 margin: 0;
  9                 padding :0;
 10             }
 11             li{
 12                 list-style: none;
 13             }
 14             .box{
 15                 width: 400px;
 16                 height: 300px;
 17                 border:1px solid #ccc;
 18                 margin:100px auto;
 19                 overflow: hidden;
 20             }
 21             /* nav 的设置  */
 22             .nav{
 23                 height: 45px;
 24                 cursor: pointer;
 25             }
 26             .nav span{
 27                 display: inline-block;
 28                 width: 90px;
 29                 background-color: pink;
 30                 line-height: 45px;
 31                 text-align: center;
 32             }
 33             .nav span.current{
 34                 background-color: purple;
 35             }
 36 
 37             /*bottom */
 38             .bottom li {
 39                 height: 255px;
 40                 background-color: purple;
 41                 display: none;
 42             }
 43 
 44             .bottom li.current{
 45                 display: block;
 46             }
 47         </style>
 48     </head>
 49     <body>
 50         <div class="box" id="box-id">
 51             <div class="nav">
 52                 <span class="current">体育</span>
 53                 <span>娱乐</span>
 54                 <span>新闻</span>
 55                 <span>综合</span>
 56             </div>
 57             <div class="bottom">
 58                 <ul>
 59                     <li class="current">我是体育模块</li>
 60                     <li >我是娱乐模块</li>
 61                     <li>我是新闻</li>
 62                     <li>我是综合</li>
 63                 </ul>
 64             </div>
 65         </div>
 66 
 67         <script src="js/common.js"></script>
 68         <script>
 69             var box = getId$('box-id');
 70 
 71             var nav = box.getElementsByTagName('div')[0];
 72             var bottom = box.getElementsByTagName('div')[1];
 73 
 74             //获取所有的 span 标签
 75             var spans = nav.getElementsByTagName('span');
 76             //获取所有的 li 标签
 77             var liObjs = bottom.getElementsByTagName('li');
 78 
 79             //添加事件
 80             for (var i=0 ;i<spans.length;i++){
 81                 //添加自定义属性 idx
 82                 spans[i].setAttribute("idx",i);
 83                 //注册事件
 84                 spans[i].onclick = function () {
 85                     //每个span 标签全部移除
 86                     for (var j = 0;j<spans.length;j++){
 87                         spans[j].removeAttribute("class");  //移除每个的 属性 class
 88                     }
 89                     //给当前 span 设置样式current
 90                     this.className = "current";
 91 
 92                     //获得当前的idx
 93                     var idx = this.getAttribute("idx");
 94                     //清除bottom 中所有的 class 属性
 95                     for (var k =0;k<liObjs.length;k++){
 96                         liObjs[k].removeAttribute("class");
 97                     }
 98                     //给liObjs[idx] 设置class 为current
 99                     liObjs[idx].className = "current"; //给class 设置可以用 className
100                     // liObjs[idx].setAttribute("class","current");  //这个也可以
101                 };
102             }
103 
104         </script>
105     </body>
106 </html>
    View Code
  • 相关阅读:
    react结合antd4.0和umi3.0的404界面
    小程序自带组件自定义tabbar
    移动安全学习清单
    跨域资源共享 CORS 详解（转）
    docker常用命令总结
    XSS绕过小结
    mysql的order by注入
    本地文件包含漏洞利用姿势
    XSS绕过<>进行测试
    clamscan+clam-freshclam.service服务启停
  • 原文地址：https://www.cnblogs.com/zach0812/p/11660776.html
Copyright © 2011-2022 走看看