-
标签元素属性:
-
(1)行内标准属性:input.id(针对行内)
-
(2)行内自定义属性:开发追加的,html自己不能使用
-
(3)js动态添加属性:可以是行内属性(系统自带的),或者自定义属性
-
(4)行外属性
-
-
1.attribute方式
-
1.获取属性:元素.getAttribute ( "id" ) ==== 行内属性(元素.id)
-
如果是类型直接使用class,无需使用className,因为这种方式用的是字符串语法获取属性
-
-
2.设置属性:元素.setAttribute('属性名',属性值); ==== 元素.id = 值
-
3.删除属性:元素.removeAttribute('属性名'); ==== delete 元素.id
-
用attribute方式设置的属性只能使用attribute方式来获取
-
-
2.注意点
-
js点语法能获取到的属性:
-
(1)行内标准属性
-
(2)js点语法动态添加的自定义属性
-
-
不能获取到的属性:
-
(1)行内自定义属性
-
(2)行外属性
-
-
getAttribute能获取到的属性:
-
(1)行内标准属性
-
(2)行内自定义属性
-
(3)setAttribute动态添加的属性
-
-
不能获取到的属性:
-
(1)js点语法动态添加的自定义属性
-
(2)行外属性
-
-
-
3.总结:js点语法操作属性与attribute语法操作属性场景(语义不同)
-
标准属性操作:使用js点语法(代码简洁)
-
自定义属性操作:用attribute(易读性更高)
-
tab栏切换小案例
需求
鼠标点击tab栏页签,tab效果切换(被选中的紫色显示),同时对应的内容栏切换
效果图
思路分析
1. span与li有一个索引对应关系:第一个span对应第一个li
2. span有没有颜色:current类控制(排他)
3. li的显示也是通过:current类控制(排他)
1. 事件源:所有的span querySelectorAll('#box>.hd>span') 遍历才能用:forEach()
2. 事件类型:点击切换 || 鼠标移入
3. 事件处理
3.1 排他:span:两步走
3.2 排他:li:两步走
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
/*将行内元素转换成行内块元素,宽高才起作用*/
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
/*交集选择器,标签指定式选择器*/
background-color: purple;
/*紫色*/
}
.bd li {
height: 255px;
background-color: purple;
display: none;
/*设置隐藏*/
}
.bd li.current {
display: block;
/*显示*/
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hd">
<span>关羽</span>
<span class="current">干将莫邪</span>
<span>李白</span>
<span>成吉思汗</span>
</div>
<div class="bd">
<ul id="list">
<li>我是上单</li>
<li class="current">我是中单</li>
<li id="li3">我是打野</li>
<li>我是射手</li>
</ul>
</div>
<script>
// 分析 当鼠标点击span的时候current就移到点击事件的span上面
let spans = document.querySelectorAll('span');
// console.log(spans);
let lis = document.querySelectorAll('li');
// console.log(lis);
spans.forEach(function (span, i) {
// 点击事件 span.onclick = function ();
span.onclick = function () {
// console.log(span);
// spans首先得遍历
spans.forEach(function (span) {
// 排他思想 得删除掉所有的current 需要用到删除的元素.classList.remove('需要删除的类名')
span.classList.remove('current');
});
// 遍历完在给需要添加的元素添加属性
span.classList.add('current');
// 点击完之后下面的li也要跟着变化 需要用到下标i
// 1先遍历lis
lis.forEach(function (li) {
// console.log(li); 不能要全部li只要其中一个li 鼠标点击到哪个li就跳转哪个li
// 1也是使用排他思想 先把所有li删除
li.classList.remove('current');
});
// 2在用下标求出点击的li[i]
lis[i].classList.add('current')
}
})
</script>
</body>
</html>