前端基础(十)_Dom自定义属性(带案例)

简介: 本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。

Dom自定义属性

1.1、为什么要用自定义属性

例:很多个 li 点击变颜色。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<script>
    var li = document.getElementsByTagName("li");
    var tag = true;// 多个div时,不能同时改变
    for(var i=0;i<li.length;i++){
   
        li[i].onclick=function(){
   
            if(tag){
   
                this.style.background="red";
                tag=false;
            }else{
   
                this.style.background="blue";
                tag=true;
            }
        }
    }
</script>
AI 代码解读

上面的例子只能实现点击变成红色、蓝色,但是不能控制单个li改变红色、蓝色
在这里插入图片描述
tag控制着整体li点击的下一次颜色,不满足要求,我们要实现,点击每一个,都能来回切换红、蓝,不影响其他的li他们都是独立的。

1.2、自定义属性

针对上面的问题,在有很多个元素情况下使用一个标识肯定是不行的,这里我们要给每一个元素都添加一个属性,表示标识状态,我们叫自定义属性。
自定义属性是指给标签添加已有属性的以外的属性,例如div标签id、class这些属性都是已有的,如果再添加一个tag属性,这就是自定义的。

例1:

<div id="box" class="box" tag="123"></div>
<script>
    var oDiv = document.getElementById('box');
    console.log(oDiv.tag);// undefined  在标签上设置的自定义的属性,点的形式,获取不到,要用到后面讲的attribute方法获取

    oDiv.abc = true;
    console.log(oDiv.abc); // true 能过js添加的属性,可以获取到
</script>
AI 代码解读

直接在标签上写上自己定义的属性,我们通过js是拿不到的,我们需要使用后续学习的attribute方法获取。
在这里插入图片描述

但是怎么解决这个问题呢?

例2 :自定义属性,实现点击改变颜色的操作

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<script>
    var li=document.getElementsByTagName("li");
    for(var i=0;i<li.length;i++){
   
        li[i].tag=true;
        li[i].onclick=function(){
   
            // console.log(this);
            if(this.tag){
   
                this.style.background="red";
                this.tag=false;
            }else{
   
                this.style.background="blue";
                this.tag=true;
            }
        }
    }
</script>
AI 代码解读

在这里插入图片描述
这样我们实现啦。
在循环里面,给每一个li元素增加tag属性,赋值为true,

li[i].tag=true;
AI 代码解读

随后给每一个li增加点击事件,判断tag的值,从而改变dom的某个属性,tag值改变,再次点击,再次判断tag的值,就可以实现了单个li来回切换。

li[i].onclick=function(){
   
    // console.log(this);
      if(this.tag){
   
          this.style.background="red";
          this.tag=false;
      }else{
   
          this.style.background="blue";
          this.tag=true;
      }
}
AI 代码解读

同时在点击事件里面,我们可以使用this来识别当前的元素。

this指向特点:
①方法函数:对象.方法() ; this->调用方法的对象
②普通函数:( window.) 函数名() this->window
③事件处理函数: oDiv.οnclick= function(){} oDiv.onclick() this->添加事件的元素
④全局中的this指向window对象

目录
打赏
0
0
0
0
95
分享
相关文章
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
133 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
106 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
160 4
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
117 2
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
725 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等