className属性
语法：
HTML元素.className=“样式名称”
代码示例：
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver"; }
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut"; }
直接来看一个详细应用的案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的购物车</title>
<link rel="stylesheet" href="/css/shopping.css">
<style>
/* 样式的优先级：行内>内部>外部
选择器的优先级：id选择器>类选择器>标签选择器
*/
</style>
</head>
<body>
<section id="shopping">
<div id="cart" onmouseover="over(this)" onmouseout="out(this)">我的购物车<span>1</span></div>
<div id="cartList">
<h2>最新加入的商品</h2>
<ul>
<li><img src="/images/makeup.jpg"></li>
<li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
<li>¥558.00×1<br/>删除</li>
</ul>
<div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
</div>
</section>
<script>
//1.确定mouseover和mouseout事件--div#cart
//鼠标进入对应的事件函数
function over1(obj){
// alert(1);
//2.将样式与进行绑定
//1)div#cart背景颜色变为#fff
obj.style.backgroundColor="#fff";
//2)div#cart无下边框
obj.style.borderBottom="none";
//3)div#cartList由隐藏变为显示 display="none|block|inline|inline-block"
var cartListObj = document.getElementById("cartList");
cartListObj.style.display="block";
//4)将div#cartList层叠与div#cart的部分在最底层
cartListObj.style.zIndex=-1;
//5)改变div#cartList的定位以及top位置
cartListObj.style.position="relative";//相对定位
cartListObj.style.top="-1px";
}
//鼠标移除对应的事件函数
function out1(obj){
// alert(2);
//2.将样式与进行绑定
//1)div#cart背景颜色变为#f9f9f9
obj.style.backgroundColor="#f9f9f9";
//2)div#cart有下边框
obj.style.borderBottom="1px #dcdcdc solid";
//3)div#cartList由显示变为隐藏display="none|block|inline|inline-block"
var cartListObj = document.getElementById("cartList");
cartListObj.style.display="none";
}
</script>
</body>
</html>
这种写法看起来很冗余，所以我们把css代码分割开来
css代码放css中：
/*加上#shooping,选择器就编程id选择器了，优先级就变高了，否则只用类选择器，样式被id选择器覆盖*/
#shopping .cartover{
background-color: #fff;
border-bottom: none ;
}
#shopping .cartListover{
display: block ;
position: relative;
top:-1px;
z-index: -1;
}
#shopping .cartout{
background-color: #f9f9f9;
border-bottom: 1px #dcdcdc solid;
}
#shopping .cartListout{
display: none ;
}
然后代码就变得简洁了：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的购物车</title>
<link rel="stylesheet" href="/css/shopping.css">
<style>
/* 样式的优先级：行内>内部>外部
选择器的优先级：id选择器>类选择器>标签选择器
*/
</style>
</head>
<body>
<section id="shopping">
<div id="cart" onmouseover="over(this)" onmouseout="out(this)">我的购物车<span>1</span></div>
<div id="cartList">
<h2>最新加入的商品</h2>
<ul>
<li><img src="/images/makeup.jpg"></li>
<li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
<li>¥558.00×1<br/>删除</li>
</ul>
<div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
</div>
</section>
<script>
function over(obj){
// 2.将样式与进行绑定
//1)div#cart的样式的类名
obj.className="cartover";
//2)div#cartList的样式的类名
var cartListObj = document.getElementById("cartList");
cartListObj.className="cartListover";
//获取样式的方法二：不兼容IE 只对chrome firefox有效
// alert(document.defaultView.getComputedStyle(cartListObj,null).display);
//获取样式的方法三：适合IE
//cartListObj.currentStyle.display="block";
}
function out(obj){
// 2.将样式与进行绑定
//1)div#cart的样式的类名
obj.className="cartout";
//2)div#cartList的样式的类名
var cartListObj = document.getElementById("cartList");
cartListObj.className="cartListout";
}
</script>
</body>
</html>
获取元素位置属性的应用：
| 属性 | 描述 |
|---|---|
| offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
| offsetTop | 返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
| offsetHeight | 返回元素的高度 |
| offsetWidth | 返回元素的宽度 |
| offsetParent | 返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
| scrollTop | 返回匹配元素的滚动条的垂直位置 |
| scrollLeft | 返回匹配元素的滚动条的水平位置 |
| clientWidth | 返回元素的可见宽度 |
| clientHeight | 返回元素的可见高度 |
| 。。。。。 | 更多请参考官方文档 |
代码格式：
这是在标准浏览器下的，有时候有兼容性问题
document.body.scrollTop;
document.body.scrollLeft;
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
为了更好的兼容性建议用谷歌浏览器
来看一个代码案例：
<style type="text/css">
#main{
text-align:center; width:1014px; margin: 0 auto;}
#adver{
/* position:fixed; 固定布局 */
position: absolute;
left:10px;
top:30px;
z-index:2;
}
</style>
</head>
<body >
<div id="adver"><img src="images/adv.jpg"/></div>
<div id="main"><img src="images/main1.JPG"/><img src="images/main2.JPG"/><img src="images/main3.JPG"/></div>
<script>
/*
总结：
1.js中所有的计算都要使用parseInt();
2.样式top left right bottom值单温必须是px
3.js中变量可以被定义多次，局部变量不能改变全局变量的值！
*/
var initTop =0;
var initLeft=0;
//获取广告条距离父元素的上边框的距离
function init(){
//alert(1);
//1.获取广告元素对象
var advObj = document.getElementById("adver");
//2.获取广告条距离父元素的距离
initTop =parseInt(advObj.offsetTop);
initLeft=parseInt(advObj.offsetLeft);
console.log(initTop+"--"+initLeft);
}
//监听窗口的滚动条的滚动事件
function move(){
//alert(initTop);
//1.获取滚动条滚动的距离：往上的距离和往左的距离
var stop = document.documentElement.scrollTop | document.body.scrollTop;
var sleft = document.documentElement.scrollLeft | document.body.scrollLeft;
console.log("scrollTop:"+stop+"--scrollleft:"+sleft);
//2.设置广告条的距离父元素的距离
//距离父元素上边框的新距离=开始距离+滚动条滚动的距离
//1)获取广告元素对象
var advObj = document.getElementById("adver");
//2)设置距离父元素的距离
var newTop = initTop + parseInt(stop);
var newLeft = initLeft + parseInt(sleft);
console.log("newTop:"+newTop+"--newLeft:"+newLeft);
//2.设置广告条的距离父元素的距离
advObj.style.top = newTop+"px";
advObj.style.left=newLeft+"px";
}
</script>
</body>