1、定位
相对定位:相对于自己原来的位置来定位
绝对定位:相对于定位父元素来定位,没有往上找
固定定位:相对于浏览器窗口来定位
position:fixed;
可以设置z-index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { height: 3000px; } .box { /* position: absolute; */ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); /* position: fixed; top: 0; left: 0; */ width: 300px; height: 300px; background-color: red; /* z-index: 1; */ } .cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3); } </style> </head> <body> <!-- 遮罩 --> <div class="cover"></div> <div class="box"></div> </body> </html>
2、js变量
js的组成
核心语法:ECMAScript
文档对象模型: DOM
浏览器对象模型:BOM
(1)什么是变量? 存储数据的容器
(2)声明 var 变量名
(3)赋值 变量名 = 值
(4)声明的同时赋值 var 变量名 = 值
(5)声明多个变量 var 变量名1= 值1,变量名2 = 值2,变量名3 = 值3
(6)多个变量值一样 var 变量名1 = 变量名2 = 变量名3 = 值
3、js三种引入方式
(1)内部
(2)外部
(3)行内
4.js中给元素添加点击事件
点哪个元素.on事件类型 = function() {}
<script> // 标签名.on+事件类型 = function() {} box.onclick = function() { alert('zhang') console.log('hou') } </script>
5. js的调试语句:
1、作用: 调试代码
2、常用的调试语句:
(1)alert()
语法: alert(message)
作用: 在页面弹出一个警示框,给用户看的
特点: 会阻断程序的执行;如果一次需要弹出多条的话,只能识别第一个
(2)console.log()
语法: console.log(message)
作用: 在浏览器的控制台中打印信息,写给程序员看的
特点: 可以在控制台一次打印多个,中间逗号隔开
(3)document.wirte()
语法: document.wirte(message)
作用: 在文档(网页)中显示信息,给用户看的
特点: 会覆盖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 300px; height: 300px; background: red; } </style> </head> <body> <div class="box" id="box"></div> <script> // alert(1); // alert('hello world'); //alert('hello world','你好'); //hello world // console.log(111); // console.log('hello world'); // console.log('hello world','你好'); // document.write('hello world') // document.write('你好') box.onclick = function() { document.write('你好') document.write('你好111') } </script> </body> </html>
6、通过id获取元素
var 变量名 = document.getElementById('id名');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="boc">111</div> <script> // 声明变量 var box = document.querySelector('boc') //通过id document.getElementById('boc') 获取所要的元素 // 添加点击事件 box.onclick = function () { console.log(111); } </script> </body> </html>
7..操作元素的css样式
获取: var 变量名 = 元素.style.width
设置: 元素.style.width = 值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 操作元素的css样式 获取元素的行内css样式 var 变量名 = 元素.style.css属性 设置元素的css样式 元素.style.css属性 = 新值 注意: font-size在js中我们要写成驼峰的写法fontSize 通过这种方式可以获取行间样式,如果是内部样式或者外部样式这种方法是拿不到的,但是可以设置 --> <div id="box" style="width: 200px; height: 200px;background: red;" ></div> <button id="btn">获取元素样式</button> <button id="btn2">设置元素的样式</button> <script> // 点击获取的这个按钮,拿到id名称为box的元素的宽度 // 1.获取元素 var box = document.getElementById('box') var btn = document.getElementById('btn') var btn2 = document.getElementById('btn2') // 2.点击事件 btn.onclick = function() { // 3.做什么 获取box的宽 var w = box.style.width // 获取颜色 var color = box.style.background // 获取字号 var fz = box.style.fontSize console.log(w,fz,color) } // 点击btn2设置box的宽 btn2.onclick = function () { box.style.width = '500px' box.style.background = 'aqua' } </script> </body> </html>