今天学了新的获取元素的方式,并且用 for 循环做了一点小小的东西。
通过 id 获取元素
document.getElementById('id 名字')
通过 class 名字获取
全文档查找
document.getElementsByClassName('class 名字')
限制范围
整个文档去找
document.getElementsByClassName('class 名字')
找某个元素符合条件的集合
元素. getElementsByClassName('class 名字')
集合的长度:length
注意:
获取的是一个集合,是多个元素, 不是数组,是类数组
通过 class 去取值,即便取到的只有一个元素,也要用下标取值
要通过下标去集合中找元素 下标从 0 开始
给每一个元素添加样式,用 for
for(var i = 0; i < actives.length; i++){
actives[i].style.【CSS 样式】 = '【值】';
}
通过 tagName 名字获取
整个文档去找
document.getElementsByTagName('标签名字')
找某个元素符合条件的集合
元素. getElementsByTagName('class 名字')
通过 css 的选择器
只能获取一个,如果是多个,默认值获取第一个
document.querySelector('css 选择器')
元素. querySelector('css 选择器')
获取多个
document.querySelectorAll('css 选择器')
元素. querySelectorAll('css 选择器')
取模(求余、取余)
求余数 % 取模 取余 的整数
求一个数除以另一个数的余数
奇数 数字 %2 == 余数
偶数 数字 %2 == 0
小技巧:
左边小于右边,返回的是左边的值
左边和右边相同,返回是 0
左边大于右边,返回的是左边除以右边的余数
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>作业-组合2</title>
- <style>
- #box{
- width: 290px;
- height: 490px;
- background: /*url(img/bgi.png) no-repeat*/ red;
- margin: 50px auto;
- position: relative;
- border: 1px solid #9292AB;
- }
- #item{
- width: 250px;
- height: 250px;
- position: absolute;
- top: 70px;
- left:20px;
- }
- #item div{
- width: 50px;
- height: 50px;
- background-color: #fff;
- position: absolute;
- text-align: center;
- font: 20px/50px arial;
- border-radius: 25px;
- }
- #btn{
- position: absolute;
- left: 90px;
- bottom: 30px;
- width: 110px;
- height: 40px;
- text-align: center;
- font: 20px/40px "微软雅黑";
- color: #000000;
- border: 1px solid #5ab1fd;
- text-decoration: none;
- border-radius: 20px;
- }
- #btn:hover{
- background-color: #5ab1fd;
- color: #fff;
- }
- </style>
- </head>
- <body>
- <section id="box">
- <section id="item">
- <!--<div style="left: 0px;top: 0px;"></div>-->
- </section>
- <a href="javascript:;" id="btn">生成</a>
- </section>
- <script>
- //获取元素
- var item = document.getElementById('item');
- var btn = document.getElementById('btn');
- //定义变量
- var odiv = "";
- var j = 0;
- var one = '';
- var two = '';
- //判断当前按钮状态
- btn.onclick = function(){
- btn.innerHTML = '变换';
- j++;
- if( j > 4 ){
- j = 1;
- }
- //清空上一次显示
- odiv = "";
- //因为写的东西很多都一样,所以直接用变量来代替
- if(j == 1){
- one = 'left';
- two = 'bottom';
- }else if (j == 2){
- one = 'top';
- two = 'right';
- }else if (j == 3){
- one = 'right';
- two = 'top';
- }else {
- one = 'bottom';
- two = 'left';
- }
- //生成div
- for(var i = 0; i<5;i++){
- //判断div定位位置形状为01210
- if( i < 2){ //前两个不用动
- odiv += '<div style="'+one+':'+(i*50)+'px;'+two+':'+(i*50)+'px;">'+(i+1)+'</div>';
- }else{ //后面因为要做成到顶再下来,用i的做大值减去当前div的i的值乘以高度生成定位坐标
- odiv += '<div style="'+one+':'+(i*50)+'px;'+two+':'+(4-i)*50+'px;">'+(i+1)+'</div>';
- }
- }
- //最后把生成的div放到item里面显示出来
- item.innerHTML = odiv;
- }
- </script>
- </body>
- </html>
因为图片的原因,我把背景图换成了纯色,会有点丑
还有一个小的例子:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>不同div相同图片定位的for应用</title>
- <style>
- #box{
- width: 900px;
- height: 600px;
- margin: 0 auto;
- position: relative;
- }
- #box div{
- width: 90px;
- height: 60px;
- position: absolute;
- /*text-align: center;
- font: 30px/60px arial;*/
- color: transparent;
- box-sizing: border-box;
- border: 1px solid rgba(255,255,255,0.7);
- background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515083006920&di=9ee0f3dd857c9dcc8831c20b1b220e91&imgtype=0&src=http://a3.topitme.com/e/3a/c0/112406883527cc03aeo.jpg) no-repeat;
- opacity: 0.3;
- transition: .5s;
- }
- #box div:hover{
- z-index: 99;
- width: 110px;
- height: 70px;
- margin: -5px 0 0 -10px;
- }
- </style>
- </head>
- <body>
- <section id="box">
- <!--<div style="left: 0px;top: 0px;background-position: 0px 0px;"></div>-->
- </section>
- <script>
- var box = document.getElementById('box');
- var odiv = '';
- var n = -1;
- var divs = '';
- for(var i=0; i<100; i++){
- if( i%10 == 0){
- n++;
- }
- odiv += '<div style="left: '+(i%10)*90+'px;top: '+(n%10)*60+'px;background-position: '+ -(i%10)*90+'px '+ -(n%10)*60+'px;">'+(i+1)+'</div>';
- }
- box.innerHTML = odiv;
- divs = box.querySelectorAll('div');
- for(var i = 0;i<divs.length;i++){
- divs[i].onmouseover = function (){
- this.style.opacity = '1';
- }
- divs[i].onmouseout = function (){
- this.style.opacity = '1';
- }
- }
- </script>
- </body>
- </html>
还是很有意思的!
来源: http://www.qdfuns.com/notes/48009/f7d194f1030a021187052e2cc9aea5ea.html