23 自定义属性

最新推荐文章于 2024-07-15 14:11:16 发布

qingshui_913

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量98

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_59809997/article/details/123454194

版权

Javascript学习笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

需求：经过盒子加边框

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 150px;
        background: skyblue;
        float: left;
        margin-left: 10;
        border: 2px solid skyblue;  /*盒子不会显示变大 */
    }
</style>
<body>
 <div></div> 
 <div></div> 
 <div></div> 
 <div></div> 
 <div></div> 
 <div></div> 
<script src="publick.js"></script>
 <script>
   var divs = document.getElementsByTagName("div");//集合
   for(var i = 0; i < divs.length; i++){
       //鼠标经过和离开
       divs[i].onmouseover = function(){
           //自己、自身
           this.style.border = "2px solid pink";
       }
       //鼠标离开
       divs[i].onmouseout = function(){
           this.style.border = "";
       }
   }
 </script>
</body>

需求：在线搜索效果

 <style>
    input{
        color: gray;
    }
</style>
<body>
<input type="text" value="请输入搜索内容" id="txt">
<script src="publick.js"></script>
  <script>
   //获取焦点事件  onfocus
   my$("txt").onfocus = function(){
       //判断
       if(this.value == "请输入搜索内容"){
           //清空
           this.value = "";
           this.style.color = "black";
       }
   }
   // 失去焦点事件 onblur
   my$("txt").onblur = function(){
       //判断
       if(this.value == ""){
           this.value = "请输入搜索内容";
           this.style.color = "gray";
       }
   }
  </script> 
</body>

需求：验证文本框密码长度

<input type="password" value="" id="txt">
<script src="publick.js"></script>
<script>
   //判断密码长度：我们要求密码长度是 >=6且<=10
   my$("txt").onblur = function(){
       //判断
       if(this.value.length >= 6 && this.value.length <= 10){
           this.style.backgroundColor = "pink";
       }else{
           this.style.backgroundColor = "red";
       }
   }
</script>

需求：设置和获取文本框的值

<input type="text" value="文本框" id="txt">
<script src="publick.js"></script>
<script>
   my$("txt").onblur = function(){
       //设置文本框里的值
       this.value = "哈哈哈";
       //获取文本框的值
       console.log(this.value);
       //获取文本框类型
       console.log(this.type);
       //获取文本框id
       console.log(this.id);
   }
</script>

innerText和innerHTML的区别

<style>
    div{
        width: 300px;
        height: 200px;
        border: 1px solid #000;
    }
</style>
<body>
 <input type="button" value="按钮" id="btn">
 <div id="dv"></div>
 <div id="dvv"></div>
 <script src="publick.js"></script>
 <script>
   //点击按钮设置内容
   my$("btn").onclick = function(){
       my$("dv").innerText = "<p>我是一个段落标签</p>";
       my$("dvv").innerHTML = "<p>我是一个段落标签</p>";
   }
 </script> 
</body>
//innerText只能获取到文本内容
  innerHTML能获取到标签里的内容，还能获取标签
  不管是设置还是获取如果只想要获取纯文本，使用innerText，如果想要文本和标签用         innerHTML

需求：设置自定义标签

<style>
    ul{
        list-style: none;
        cursor: pointer;
    }
</style>
<body>
 <ul>
   <li>小明的成绩</li>
   <li>小红的成绩</li>
   <li>小黄的成绩</li>
   <li>小华的成绩</li>
   <li>小花的成绩</li>
   <li>小黑的成绩</li>
 </ul> 
<script src="publick.js"></script>
<script>
   //设置自定义属性:setAttribute("属性的名字","属性的值");
   //获取自定义属性：getAttribute("属性的名字");
   var list = document.getElementsByTagName("li");//集合、伪数组
   //循环
   for(var i = 0; i < list.length; i++){
       list[i].setAttribute("score",(i+1)*20);//设置自定义属性
       //点击每个li标签，显示对应的自定义属性
       list[i].onclick = function(){
           alert(this.getAttribute("score"));
       }
   }
</script>
</body>

需求：删除自定义属性

<style>
    div{
        width: 300px;
        height: 200px;
        background: pink;
    }
    .cls{
        background: skyblue;
    }
</style>
<body>
 <input type="button" value="移除自定义属性" id="btn">
 <div id="dv" score="10" class="cls"></div>
 <script src="publick.js"></script>
 <script>
   //移除自定义属性  removeAttribute("属性名字")
   my$("btn").onclick = function(){
       my$("dv").removeAttribute("score");//删除自定义属性
       my$("dv").removeAttribute("class");//可以删除系统自带的属性
   }
 </script> 
</body>

qingshui_913

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23 自定义属性

需求：经过盒子加边框<style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 150px; background: skyblue; float: left; margin-left: 10; border: 2px solid skyblue; /*盒子不会显示变大 */
复制链接

扫一扫