JavaScript 排他思想、自定义属性操作

最新推荐文章于 2024-05-17 13:52:13 发布

MDR_0820

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量154

点赞数

分类专栏： JavaScript 文章标签： javascript css css3

本文链接：https://blog.csdn.net/mdr_0820/article/details/120888760

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

排他思想

如果有同一组元素想要某一个元素实现某种样式需要用到循环的排他思想算法

所有元素全部清除样式
给当前元素设置样式
首先先排除其他然后设置自己的样式

<body>
        <button>一篇诗</button>
        <button>一壶酒</button>
        <button>一曲长歌</button>
        <button>一剑天涯</button>
        <button>今朝有酒今朝醉</button>
       <script>
           var but = document.getElementsByTagName('button')
           for ( var i = 0;i < but.length; i++){
               but[i].onclick = function(){
                   for( var i = 0; i < but.length; i++){
                       but[i].style.backgroundColor= ''
                   }
                   this.style.backgroundColor = 'pink'
               }
           }
       </script>

在这里插入图片描述

自定义属性的操作

获取属性值

element：属性获取属性值
element.getAttribute(’属性‘）

区别

element：属性获取内置属性值（元素本身带的属性）
element.getAttribute(’属性‘）获取自定义属性程序员自定义的属性

<body>
    <div id="demo" index="1"></div>
    <script>
        var div = document.querySelector('div')
        console.log(div.id);
        // element.getAttribute('属性'） 
        console.log(div.getAttribute('id'));
        // 获取自定义属性
        console.log(div.getAttribute('index'));
    </script>

在这里插入图片描述

设置属性值

element.属性 = ‘值’
element.setAttribute(’属性‘，‘值’）

区别

element.属性设置内置属性值
element.setAttribute(’属性‘，‘值’）主要设置自定义的属性

div.id='test'
        div.setAttribute('index',2)
        // class 特殊 写的就是class 不是className
        div.setAttribute('class','footer')

在这里插入图片描述

移除属性

element.removeAttribute （‘属性’）移除属性

//  element.removeAttribute 移除属性
        div.removeAttribute('index')

在这里插入图片描述

h5自定义属性

自定义属性的目的是为了保存并使用数据有些数据可以保存到页面中而不用保存到数据库中
自定义属性是通过getAttribute(‘属性’)获取

h5规定自定义属性data-开头作为属性名并且赋值

MDR_0820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 排他思想、自定义属性操作

排他思想如果有同一组元素想要某一个元素实现某种样式需要用到循环的排他思想算法所有元素全部清除样式给当前元素设置样式首先先排除其他然后设置自己的样式<body> <button>一篇诗</button> <button>一壶酒</button> <button>一曲长歌</button> <button>一剑天涯</butto
复制链接

扫一扫