一：Css
1.1：position定义和用法
position 属性规定元素的定位类型。
可能的值
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
查看完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box { border:1px solid #f60; width:100px; height:100px; margin:0 auto; -webkit-border-radius:50px; -moz-border-radius:50px; -o-border-radius:50px; border-radius:50px; } </style> </head> <body> <div style="position: relative; 500px;height: 300px;border: 2px solid red;margin:0 auto"> <div style="position: absolute; 50px;height: 50px;background-color: black;left: 0;bottom: 0"></div> <div style="position: absolute; 50px;height: 50px;background-color: blue;right: 0;bottom: 0"></div> <div style="position: absolute; 50px;height: 50px;background-color: red;right: 0;top: 0"></div> <div style="position: absolute; 50px;height: 50px;background-color: darkgoldenrod;top: 0;bottom: 0"></div> <div class="box" style="position: absolute; top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;"></div> </div> </body> </html>
二：Dom
1、找到标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接
tag = document.getElementById('i1')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2、操作标签
a. innerText
获取标签中的文本内容
标签.innerText
对标签内部文本进行重新复制
标签.innerText = ""
b. className
tag.className =》 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式
PS：
<div onclick='func();'>点我</div>
<script>
function func(){
}
</script>
c. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true
查看完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0"> <div> <input type="button" value="添加" onclick="ShowModel()"/> <input type="button" value="全选" onclick="ChooseAll()"/> <input type="button" value="取消" onclick="CancleAll()"/> <input type="button" value="反选" onclick="ReverseAll()"/> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>10</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.2</td> <td>20</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>30</td> </tr> </tbody> </table> </div> <div id="i1" class="c1 hide"></div> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <p><input type="button" value="取消" onclick="HideModel();" /></p> <p><input type="button" value="确定" /></p> </p> </div> <script> function ShowModel() { document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel() { document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll() { var tbody = document.getElementById('tb'); var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancleAll() { var tbody = document.getElementById('tb'); var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll() { var tbody = document.getElementById('tb'); var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked) { checkbox.checked = false; }else { checkbox.checked = true; } } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style=" 300px"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>