我们会在很多场景用到自定义属性。

自定义属性的作用：

有些属性没有必要保存在数据库中，设置成自定义属性更加方便存储

我们会在很多场景用到自定义属性。

1. 原生javascript的自定义属性的操作方式

1.1【获取】getAttribute

1.2【设置】setAttribute

1.3 【删除】removeAttribute

1.4 H5的自定义属性的操作

2.jQuery编程中自定义属性的设置

2.1【设置自定义属性】

2.2【获取自定义属性】

2.3【删除自定义属性?】

2.4【设置H5的自定义属性】

2.5【获取其自定义属性】

2.6【修改其自定义属性】

4. 应用：tab栏切换

1. 原生javascript的自定义属性的操作方式

1.1【获取】getAttribute

// 也可获取非自定义属性
div.getAttribute('id');
// 获取自定义属性
div.getAttribute('index');

1.2【设置】setAttribute

// 设置自定义属性
div.setAttribute('index',i); // 比如说在for循环里// 也可设置非自定义属性
div.setAttribute('id', 'father');
div.setAttribute('class', 'big');

1.3 【删除】removeAttribute

div.removeAttribute('index');

1.4 H5的自定义属性的操作

<div></div><script>var div = document.querySelector('div'); div.setAttribute('data-index', 1); // 设置H5自定义属性console.log(div.getAttribute('data-index')); // 打印获取H5自定义属性
</script>

H5自定义属性，我们“约定俗成”，如果这个属性是自定义属性，就加一个data，比如data-time，data-index

2.jQuery编程中自定义属性的设置

2.1【设置自定义属性】

$('div').attr('index',i); // 设置自定义属性index为比如说是i

2.2【获取自定义属性】

$('div').attr('index');

2.3【删除自定义属性?】

$('div').remove('index');

2.4【设置H5的自定义属性】

<div data-index="1" class="box">

2.5【获取其自定义属性】

$(".box").attr("data-index");

2.6【修改其自定义属性】

$(".box").attr("data-index", 2);

PS: 如果无法判断一个属性是否是自定义属性，可以进行如下测试

例如判断getTime属性是否是自定义属性

var div = document.querySelector('div');
console.log(div.getTime); // undefined

结论：如果打印出来是undefined，不能直接用元素.属性名的方式获取元素，那么就是自定义属性，必须要用getAttribute来获取

应用案例：

3. 应用：tab栏切换

轮播图案例中，通常有几个轮播图片，就会生成几个，小圆点，所用的思想和下面的类似

HTML

<div class="tab"><div class="tab_list"><ul><li class="current">商品</li><li>规格</li><li>售后</li><li>商品（50000）</li><li>手机</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品</div><div class="item">规格</div><div class="item">售后</div><div class="item">商品</div><div class="item">手机社区</div></div>
</div>

CSS

        * {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}

JS代码

 var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');for (var i = 0; i < lis.length; i++) {// 1、 设置自定义属性lis[i].setAttribute('index', i);lis[i].addEventListener('click', function () {//  2、 获取自定义属性var index = this.getAttribute('index');// console.log(index);//  3、 排他思想，颜色的改变tab_list.querySelector('.current').classList.remove('current');this.classList.add('current');//  4. 排他思想，tab栏底部颜色的变化for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}items[index].style.display = 'block';})
}

备注：自定义属性在后面“前后端学习”里面的通过调用后台数据库的资源渲染到浏览器的页面，也很常见。

结尾：

学习id： 201903090124-17

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。

【getAttribute】【setAttribute】【removeAttribute】【attr】【remove】自定义属性的应用怎么设置自定义属性怎么修改删除自定义属性相关推荐

getAttribute setAttribute removeAttribute
<body><input type="button" value="zj" οnclick="tj();" class=& ...
[js] DOM getAttribute setAttribute removeAttribute
<div id="div1" class="div2" title="div3" name="div4" abc= ...
原生js自定义属性的操作：setAttribute、getAttribute、removeAttribute、hasAttribute
<input type="button" id="btn" a='18' value="按钮"> var btn = docum ...
html 自定义属性_重学前端基础：属性操作，重点getAttribute / setAttribute方法
属性操作 HTML 属性与 DOM 属性的对应每个 HTML 属性都会对应相应的 DOM 对象属性. 属性操作方式读取属性 User Name: input.className; // 'text ...
js设置，获取，删除属性(setAttribute, getAttribute, removeAttribute)
设置,获取,删除属性 setAttribute() setAttribute() 方法添加指定的属性,并为其赋指定的值. 如果这个指定的属性已存在,则仅设置/更改值. getAttribute() g ...
setAttribute、getAttribute、removeAttribute
问题:下面两者的区别 box.setAttribute("liang", "456"); box.liang = 789; <body><di ...
maya对象属性_Maya创建、编辑或删除自定义属性,MAYA
创建.编辑或删除自定义属性将自定义属性添加到对象中 1.选择要将属性添加到其中的对象/节点. 2.在"属性编辑器"(Attribute Editor)中,选择"属性 & ...
java removeattribute_removeAttribute getAttribute setAttribute
1.removeAttribute() 方法删除指定的属性. 注:removeAttributeNode() 方法从元素中删除指定的属性节点. 简单的来讲,removeAttribute() 移除元素 ...
js setAttribute removeAttribute
1 <input type="button" value="生效" style="font-size:111px"/> 2 &l ...

【getAttribute】【setAttribute】【removeAttribute】【attr】【remove】自定义属性的应用怎么设置自定义属性怎么修改删除自定义属性

我们会在很多场景用到自定义属性。

1. 原生javascript的自定义属性的操作方式

1.1【获取】getAttribute

1.2【设置】setAttribute

1.3 【删除】removeAttribute

1.4 H5的自定义属性的操作

2.jQuery编程中自定义属性的设置

2.1【设置自定义属性】

2.2【获取自定义属性】

2.3【删除自定义属性?】

2.4【设置H5的自定义属性】

2.5【获取其自定义属性】

2.6【修改其自定义属性】

3. 应用：tab栏切换

【getAttribute】【setAttribute】【removeAttribute】【attr】【remove】自定义属性的应用怎么设置自定义属性怎么修改删除自定义属性相关推荐

最新文章

热门文章

【getAttribute】【setAttribute】【removeAttribute】【attr】【remove】自定义属性的应用 怎么设置自定义属性 怎么修改删除自定义属性

我们会在很多场景用到自定义属性。

1. 原生javascript的自定义属性的操作方式

1.1【获取】getAttribute

1.2【设置】setAttribute

1.3 【删除】removeAttribute

1.4 H5的自定义属性的操作

2.jQuery编程中自定义属性的设置

2.1【设置自定义属性】

2.2【获取自定义属性】

2.3【删除自定义属性?】

2.4【设置H5的自定义属性】

2.5【获取其自定义属性】

2.6【修改其自定义属性】

3. 应用：tab栏切换

【getAttribute】【setAttribute】【removeAttribute】【attr】【remove】自定义属性的应用 怎么设置自定义属性 怎么修改删除自定义属性相关推荐

最新文章

热门文章

【getAttribute】【setAttribute】【removeAttribute】【attr】【remove】自定义属性的应用怎么设置自定义属性怎么修改删除自定义属性

【getAttribute】【setAttribute】【removeAttribute】【attr】【remove】自定义属性的应用怎么设置自定义属性怎么修改删除自定义属性相关推荐