javascript（js与css交互）

（1）CSS样式有三种类型：行内样式、内部样式和外部样式

（2）JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法。

/*1 行内样式
通过element.style.attr（元素.style.属性）即可获取可设置*/

// 获取行内式样式(带单位)
console.log(oDiv.style.width);
// 获取非行内式样式(null)
console.log(oDiv.style.height);

/*2.非行内样式获取法*/
getComputeStyle(obj,false)[name]  //非IE
currentStyle[name]  //IE

/*下面封装了一个方法：为了获取非行内式样式  不管使用什么浏览器*/
		 function getStyle(obj,name){
			 	if(obj.currentStyle){//兼容IE
			 		return obj.currentStyle[name];
			 	}else{//非IE
					return getComputedStyle(obj,false)[name];
				}
			 }

2.表格对象的增删改查

节点操作：增删改查
	获取节点：
	children|childNodes(返回子节点)
	firstChild|firstElementChild(返回第一个节点)
	lastChild|lastElementChild(返回最后一个节点)
	parentNode|parentElement(返回父节点)
	nextSibling(返回某节点的下一个节点，包含空格，文本等)|nextElementSibling(获取上一个兄弟节点)
	previousSibling(返回某节点的上一个节点，包含空格，文本等)|previousElementSibling(获取上一个兄弟节点)
	创建节点
	createElement('标签')
	createTextNode("文本");
	createAttribute("属性");
	添加
	appendChild
	insertBefore(newChild,已知节点)
	替换节点
	replaceChild();
	克隆节点
	cloneNode(true);
	移除节点
	removeChild(节点);
	js中的表格对象操作
	table
	rows(返回表格中行的一个数组)
	insertRow(新增行)
	deleteRow(删除行)
	tr
	cells(获取下标个数)
	insertCell(新增到列的最后一个元素后面)
	deleteCell(删除表格中的行单元格)
	td
	rowIndex(返回某行在表格中的位置)
	innerHTML

 

<script type="text/javascript">
			//新增订单的点击事件
			/*
				1.获取表格对象
				2.获取指定的位置(tr的下标)
				3.调用insertRow(index);
			*/
			function addOrder() {
				// 获取表格对象
				var table = document.querySelector("table");
				// 获取指定的位置下标
				var length = table.rows.length - 1;
				// 调用新增tr的方法并且会将tr对象返回
				var tr = table.insertRow(length);
				tr.id = length;
				// 第1个单元格
				var td1 = tr.insertCell(0);
				td1.innerHTML = "<input name = 'sb' type = 'checkbox' value = '" + tr.id + "'/>"
				// 第2个单元格
				var td2 = tr.insertCell(1);
				td2.innerHTML = "<input type = 'text' style = 'width:100px'>";
				// 第3个单元格
				var td3 = tr.insertCell(2);
				td3.innerHTML = "<input type = 'text' style = 'width:50px'>";
				// 第4个单元格
				var td4 = tr.insertCell(3);
				td4.innerHTML = "<input type = 'text' style = 'width:50px'>";
				// 第5个单元格
				var td5 = tr.insertCell(4);
				td5.innerHTML = "<button onclick = 'mydel(\"" + tr.id + "\")'>删除</button> <button onclick = 'myConfirm(\"" + tr
					.id + "\")'>确认</button>";
			}

			// 确认事件
			function myConfirm(id) {
				// console.log(typeof(id));
				//根据参数id获取当前所点击的tr
				var tr = document.getElementById(id);
				// console.log(tr);
				// 获取第2个单元格中的输入项中的value属性
				var gname = tr.cells[1].lastElementChild.value;
				// 获取第3个单元格中的输入项中的value属性
				var gprice = tr.cells[2].lastElementChild.value;
				// 获取第4个单元格中的输入项中的value属性
				var gcount = tr.cells[3].lastElementChild.value;
				//将获取的结果重新赋值到每一个单元格的文本内容中
				tr.cells[1].innerHTML = gname;
				tr.cells[2].innerHTML = gprice;
				tr.cells[3].innerHTML = gcount;

				//将确认按钮改变内容以及事件监听
				var confirmbtn = tr.cells[4].lastElementChild;
				confirmbtn.innerHTML = "修改";
				confirmbtn.setAttribute("onclick", "myEdit('" + id + "')");
			}

			// 修改事件
			function myEdit(id) {
				//根据参数id获取当前所点击的tr
				var tr = document.getElementById(id);
				// 名称
				var gname = tr.cells[1].innerHTML;
				// 价格
				var gprice = tr.cells[2].innerHTML;
				// 名称
				var gcount = tr.cells[3].innerHTML;
				// 将内容设置到每个单元格中输入项中
				tr.cells[1].innerHTML = "<input type = 'text' value = '" + gname + "' style = 'width:100px'>";
				tr.cells[2].innerHTML = "<input type = 'text' value = '" + gprice + "' style = 'width:50px'>";
				tr.cells[3].innerHTML = "<input type = 'text' value = '" + gcount + "' style = 'width:50px'>";

				//将修改的按钮的内容以及事件监听
				var editbtn = tr.cells[4].lastElementChild;
				editbtn.innerHTML = '确认';
                //设置元素属性
				editbtn.setAttribute("onclick", "myConfirm('" + id + "')")
			}

			// 删除的点击事件
			function mydel(id) {
				//根据参数id获取当前所点击的tr
				var tr = document.getElementById(id);
				// 获取改行对应的下标
				var index = tr.rowIndex;
				//获取表格对象
				var table = document.querySelector("table");
				// 调用deleteRow
				table.deleteRow(index);
            }
			

网页特效的四大家族

offset 偏移量

client 客户端（获取屏幕的宽度和高度）

scroll 滚动条

event 事件

offset：偏移量,获取元素的宽度和高度以及距离页面顶端与左侧端的间距

		var oDiv = document.querySelector('div');
			// 获取宽度和高度 (width+padding+border) 不包含外边距 不带单位
			console.log(oDiv.offsetWidth);
			console.log(oDiv.offsetHeight);	

client 客户端：可以可视区宽度

            // 获取标签的可视区宽度（width+padding）
            console.log(oDiv.clientWidth);

scroll ：滚动

window.onscroll = function(){
				console.log("我触发了滚动条");
				console.log(document.documentElement.scrollTop);
				// console.log(document.body.scrollTop);iE
			};

案例：不动的漂浮窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入封装的js插件 -->
		<script src="myjs.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 获取div
			var oDiv = document.querySelector('div');
			var mytop = getStyle(oDiv, 'top');
			console.log('mytop==' + mytop);
			//滚动监听事件
			window.onscroll = function() {
				// 当滚动条被滚动时，获取被滚去的距离
				var scrollObj = scroll();
				var myscrollTop = scrollObj.top;

				//将盒子div的top值与被滚动的距离相加
				var result - parseInt(mytop) + myscrollTop;
				console.log(result);
				//将最终的结果赋值给top属性
				oDiv.style.top = result + 'px';
			};
		</script>
	</head>
	<body>
		<div>
			我是漂浮的广告窗口
		</div>
	</body>
</html>