目录
5.案例:表格隔行变色(通过改变 this.className的值来获取样式)
一、排他思想以及获取、设置、移除属性
1.排他思想
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:
1. 所有元素全部清除样式
2. 给当前元素设置样式
(后面会有案例练习)
2.获取属性的值
1. element.属性 获取属性值
2. element.getAttribute('属性');
<div id="emo" index="1"> </div>
//1. element.属性 获取属性值
var div = document.querySelector('div');
console.log(div.id);
//------------------------------------------------------
//2. element.getAttribute('属性');
var div = document.querySelector('div');
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
区别:
1. element.属性获取内置属性值(元素本身自带的属性)
2. element.getAttribute(属性");主要获得自定义的属性(标准) 我们程序员自定义的属性
3.设置属性的值
1. element.属性 = '值' 设置内置属性值
2. element.setAttribute('属性','值');
区别:
1. element.属性 设置内置属性值
(若要更改 class的属性值,则会为 element.className = ' ')
2. element.setAttribute('属性',’值‘); 主要设置自定义的属性(标准) , 对于修改class的属性, 就是 class,不需要在后面加 Name
4.移除属性
element.removeAttribute('属性');
5.案例:表格隔行变色(通过改变 this.className的值来获取样式)
实现鼠标经过哪行哪行背景颜色就发生变化
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 866px;
margin: 100px auto;
}
table thead {
height: 40px;
background-color: #7fc8ed;
}
table tbody {
color: #565ce6;
font-size: 14px;
}
table tbody tr th {
height: 40px;
border-bottom: 1px solid #ccc;
}
.after {
background-color: rgb(185, 223, 238);
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<th>003526</th>
<th>农银金穗3个月定期开放债务</th>
<th>1.075</th>
<th>1.079</th>
<th>1.074</th>
<th>+0.047%</th>
</tr>
<tr>
<th>003526</th>
<th>农银金穗3个月定期开放债务</th>
<th>1.075</th>
<th>1.079</th>
<th>1.074</th>
<th>+0.047%</th>
</tr>
<tr>
<th>003526</th>
<th>农银金穗3个月定期开放债务</th>
<th>1.075</th>
<th>1.079</th>
<th>1.074</th>
<th>+0.047%</th>
</tr>
<tr>
<th>003526</th>
<th>农银金穗3个月定期开放债务</th>
<th>1.075</th>
<th>1.079</th>
<th>1.074</th>
<th>+0.047%</th>
</tr>
<tr>
<th>003526</th>
<th>农银金穗3个月定期开放债务</th>
<th>1.075</th>
<th>1.079</th>
<th>1.074</th>
<th>+0.047%</th>
</tr>
<tr>
<th>003526</th>
<th>农银金穗3个月定期开放债务</th>
<th>1.075</th>
<th>1.079</th>
<th>1.074</th>
<th>+0.047%</th>
</tr>
</tbody>
</table>
<script>
var bod = document.querySelector('tbody').querySelectorAll('tr');
for(var i = 0; i < bod.length; i++) {
bod[i].onmouseover = function() {
this.className = 'after';
}
bod[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>
6. 排他思想按钮案例
实现点击哪个按钮哪个按钮的背景颜色就变成 粉色,但其他的不变色
排他思想: 当你点击了某个按钮之前先利用 for 循环把所有的按钮的背景颜色都变成 空,循环结束后再把被点击按钮的背景颜色变为粉色
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btn = document.getElementsByTagName('button');
for(var i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
for( i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
7.tab栏切换案例(设置属性、获取属性用法)
通过点击不同的标题显示不同的内容
<title>Document</title>
<style>
* {
list-style: none;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
width: 800px;
margin: 100px auto;
}
ul {
display: flex;
height: 40px;
align-items: center;
border: 1px solid #e6e7e6;
background-color: #eff0ef;
}
ul li {
padding: 0 15px;
height: 40px;
line-height: 40px;
}
.current {
background-color: #d72720;
color: white;
}
ul li:hover {
cursor: pointer;
}
.item {
display: none;
}
.tbody {
padding-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tbody">
<div class="item" style="display:block">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(50000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
var li = document.querySelector('.head').querySelectorAll('li');
var item = document.querySelector('.tbody').querySelectorAll('.item');
for(var i = 0; i < li.length; i++) {
li[i].setAttribute('data-index',i);
li[i].onclick = function() {
for(var i = 0; i < li.length; i++) {
li[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('data-index');
for(var i = 0; i < item.length; i++) {
item[i].style.display = 'none';
}
item[index].style.display = 'block';
}
}
</script>
</body>