快速掌握Web API中的属性操作

猫摸毛毛虫
91 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

在网页开发中，常常需要对元素的属性进行操作，例如校验输入是否合法、动态修改元素的CSS样式等。下面通过举例描述以便快速理解掌握属性操作。

一、检验输入的用户名和密码是否合法

思路分析：

  1. 获取表单元素（通过id、类名和标签等方式获取）；
  2. 获取表单元素中的属性值的内容；
  3. 判断值从而执行不同操作。
//html
用户名：<input id="userName" type="text"/><br><br>
密码：<input id="password" type="password"/><br>
<input id="login" type="button" value="登录"/>

//js
var login = document.getElementById('login');
login.onclick = function () {
        var userName = document.getElementById('userName');
        var password = document.getElementById('password');
        console.log(userName.value); //input框中的value属性值
        console.log(password.value);
        /* 这部分就是根据值的内容执行的操作内容
            if(...) {......}
        */
}

通过getElementById等方式获取到的元素对象包含该对象所有的属性内容，比如input标签，常用的属性就是输入值的内容value、代表元素类名的值className。

二、自定义属性

我们可以给标签设置自定义属性，这种自定义属性的方式可以很方便我们对标签进行复杂的操作，设置的方式有两种，一是直接在标签内写入dataId='1'，二是通过Web API中的函数设置。

1、直接设置
//html
 <div id="box" dataId="1" age="18"></div>

//js
var box = document.getElementById('box');
console.log(box.dataId);
console.log(box.age);
2、函数设置
  • getAttribute(name) 获取标签行内属性，需要传入参数：属性名
  • setAttribute(name, value) 设置标签行内属性，参数有两个，第一个是属性名，第二个是属性值；
  • removeAttribute(name) 移除标签行内属性，需要传入参数：属性名
//html
 <div id="box" age="18"></div>

//js
var box = document.getElementById('box');
box.setAttribute('sex', true);
console.log(box.getAttribute('sex'));
box.removeAttribute('age');
三、tab选项卡切换

思路分析：

  1. 将整体分为两部分，一是上方的tab选项部分，下面用tab头部代替描述，二是下方的某一选项被选中时展示的内容部分，下面用tab内容代替描述；
  2. 需要给每个tab头部的选项标签span绑定点击事件；点击时需要
    • 先取消所有的高亮显示（颜色不同）；
    • 再设置高亮显示
  3. 同时需要先隐藏所有的tab内容，然后在设置当前span对应的内容显示。
//html
<div class="box">
    <div class="headBox" id="headBox">
        <span class="current">选项一</span>
        <span>选项二</span>
        ......
    </div>
    <div class="bodyBox" id="bodyBox">
        <div class="current">我是选项一模块</div>
        <div>我是选项二模块</div>
        ......
    </div>
</div>

//部分CSS代码
.headBox span.current {
    background-color: purple;
}
.bodyBox div {
    display: none;
}
.bodyBox div.current {
    display: block;
}

//部分js
var headBox = document.getElementById('headBox');
var spans = headBox.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
    var span = spans[i];
    span.setAttribute('index', i);
    span.onclick = fn;
}
function fn() {
    for (var i = 0; i < spans.length; i++) {
        var span = spans[i];
        span.className = '';
    }
    this.className = 'current';
    var bodyBox = document.getElementById('bodyBox');
    var divs = bodyBox.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        var div = divs[i];
        div.className = '';
    }
    var index = this.getAttribute('index');
    divs[index].className = 'current';
}

注：所有的span标签和所有的div呈对应关系，我们就可以利用元素集合的有序性，加上在span标签中自定义属性index，然后利用index定位到对应的div。

avatar
文章
阅读
粉丝