• 进阶版JavaScript学习-第三期

     距离上一期更新已经过了好久，非常抱歉。因为自己的一些原因，没有能够及时更新。

    博主主页：GUIDM的主页

    专栏内容：进阶版JavaScript学习

    一、排他思想

    如果有同一组元素，我们想要某一元素实现某种样式，需要用到循环结构的排他思想算法。

    1、所有元素清除样式

    2、给当前元素设置样式

    3、注意顺序不能颠倒。

    改变按钮点击后的颜色。 

    1. <body>
    2.     <button>1button>
    3.     <button>2button>
    4.     <button>3button>
    5.     <button>4button>
    6.     <button>5button>
    7.     <script>
    8.         var btns=document.getElementsByTagName('button');
    9.         for(var i=0;ilength;i++){
    10.             btns[i].onclick=function(){/*（1）先把所有的按钮背景颜色去掉*/
    11.                 for(var i=0;ilength;i++){
    12.                     btns[i].style.backgroundColor='';
    13.                 }
    14.                 this.style.backgroundColor='blue';//让当前的元素背景为blue
    15.             }
    16.         }
    17.     script>
    18. body>

    二、自定义属性的操作

    1、获取属性值：

    element.属性：获取内置属性值(元素本身自带的属性)。

    element.getAttribute('属性')：主要获得自定义的属性（标准）。

    2、设置属性值

    element.属性='值'

    element.setArribute('属性','值')：主要针对于自定义属性。

    3、移出属性

    element.removeAttribute('属性')

    1. <body>
    2.     <div id="demo" index="1" class="nav">okokdiv>
    3.     <script>
    4.         console.log(div.id);
    5.         console.log(div.getAttribute("id"));
    6.         div.id='test';
    7.         div.setAttribute('index',2);
    8.         div.setAttribute('class','footer');
    9.         div.removeAttribute('index');
    10.     script>

    三、H5自定义属性

    自定义属性的目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。

    H5新增自定义属性的规范和要求：

    1、自定义属性以data开头作为属性并且赋值。

    2、使用JS设置element.setAttribute('data-index',2） 

    获取H5自定义属性

    1、兼容性获取：

    element.getAttribute('data-index');

    2、H5新增：

    element.dataset.属性

    只能去data-开头的属性，dataset为集合存放了所有data开头的自定义属性。

    如果自定义属性里面有多个-连接的单词，我们采取驼峰命名法。

    1. <body>
    2.     <div getTime='20' data-index='2' data-list-name="luck">div>
    3.     <script>
    4.         var div=document.querySelector('div');
    5.         console.log(div.getAttribute('getTime'));
    6.         console.log(div.dataset.listName);
    7.         console.log(div.dataset['listName']);
    8.     script>
    9. body>

  • 相关阅读:
    【华为上机真题 2022】流水线
    LeetCode 1470. 重新排列数组：考研扣两分的做法
    可以 DIY 装修的商城系统，你也能拥有！
    Hive——DDL（Data Definition Language）数据定义语句用法详解
    Android解决问题的思路
    java计算机毕业设计心理学网站源码+数据库+系统+lw文档+mybatis+运行部署
    EDVR和FastDVD
    【LeetCode-389】找不同
    Java面试八股文宝典:初识数据结构-数组
    TouchGFX之后端通信
  • 原文地址：https://blog.csdn.net/m0_61901625/article/details/126718192