JS和CSS的交互
因为要把js与css交互所有本章博客首先复习css的样式表
1.样式
1.1回顾样式表
//样式表的基本语法
//标签选择器
input{
width:120px;
border:solid 1px #ff0000;
}
//ID选择器
#flow{
color:#ff0000
}
//类选择器
.center{
text-align:center;
font-weight:bold;
}
1.2常见样式
常见的样式有：
- 文本属性
- 背景属性
- 边框属性
- 边界属性
- 填充属性
- 浮动属性
- 列表属性
- 定位属性
1.3样式表类型
- 行内样式
- 内部样式表
- 外部样式表
<input name="user" type="text" style="width:100px; border:solid 1px #cccccc;" />
<div style="font-size:13px; font-weight:bold;color:#ff0000">红色加粗的字体</div>
1.3.1内部样式表
- 使用外部样式表
- 使用标签链接到外部样式文件
- 使用@import方法导入外部样式表
<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>
1.3.2外部样式表
- 使用外部样式表
- 使用标签链接到外部样式文件
- 使用@import方法导入外部样式表
<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>
1.4练习
<style type="text/css">
body{
font-size: 12px;
line-height: 20px;
}
.left{
text-align: right;
width: 100px;
height: 25px;
}
a{
text-decoration: none;
}
a:hover{
color: #F00;
text-decoration: none;
}
.border{
border: 1px solid #333;
width: 120px;
height: 16px;
}
</style>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<form action="" method="post" name="myform">
<tr>
<td class="left">会员名：</td>
<td><input type="text" name="user" id="user" class="border" /></td>
</tr>
<tr>
<td class="left">密码：</td>
<td><input type="text" name="mima" id="mima" class="border"/></td>
</tr>
<tr>
<td> </td>
<td>
<input id="login" type="image" value="登录" src="img/btn.jpg" />
<a href="#">会员注册</a>
</td>
</tr>
</form>
</table>
</body>
2.使用style属性
2.1改变页面元素的样式
先来个小案例
- 使用getElement系列方法访问元素
改变样式属性：
- Style属性
- className属性
<style type="text/css">
.out {
border: solid 1px #eeeeee;
}
.over {
border: solid 2px #F60;
}
</style>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><img src="img/new_01.jpg" class="out" onmouseover="this.className='over'" onmouseout="this.className='out'"></td>
<td><img src="img/new_02.jpg" class="out" onmouseover="this.className='over'" onmouseout="this.className='out'"></td>
<td><img src="img/new_03.jpg" class="out" onmouseover="this.className='over'" onmouseout="this.className='out'"></td>
</tr>
</table>
</body>
2.2Style属性
语法：HTML元素.style.样式属性＝"值"
document.getElementById("titles").style.color="#ff0000";//正确方式
document.getElementById("titles").style.font-size="25p";//错误方式
2.3style对象的常用属性
2.4style属性制作菜单
- 鼠标移到菜单上时改变菜单样式
- 鼠标移出菜单时恢复为原来的样式
<style type="text/css">
li {
font-size: 12px;
color: #ffffff;
background-image: url(img/bg1.gif);
background-repeat: no-repeat;
text-align: center;
height: 33px;
width: 104px;
line-height: 38px;
float: left;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>资讯动态</li>
<li>产品世界</li>
<li>市场营销</li>
</ul>
</body>
<script type="text/javascript">
var len = document.getElementsByTagName("li");
for (var i = 0; i < len.length; i++) {
len[i].onmouseover = function() {
this.style.backgroundImage = "url(img/bg2.gif)";
}
len[i].onmouseout = function() {
this.style.backgroundImage = "url(img/bg1.gif)";
}
}
</script>
2.5常用事件
//使用style属性改变样式
<ul>
<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'"
onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">资讯动态</li>
<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'"
onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">产品世界</li>
<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'"
onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">市场营销</li>
</ul>
3.使用className属性
3.1语法
HTML元素.className=“类样式名”
//over和out分别为鼠标移到菜单上和移出菜单时的菜单样式
<ul>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">资讯动态</li>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">产品世界</li>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">市场营销</li>
</ul>
3.2函数改变菜单特效
- 设置两个样式over和out，表示鼠标移至菜单和移出菜单的效果
- 统一为每一个li标签设置onmouseover事件和onmouseout事件效果
var len=document.getElementsByTagName("li");
for(var i=0;i<len.length;i++){
len[i].onmouseover=function(){
this.className="over";
}
len[i].onmouseout=function(){
this.className="out";
}
}
4.使用scrollTop
4.1获取样式属性值
//获取行内样式的方法
//语法：document.getElementById(elementId).样式属性值
var divObj=document.getElementById("test");
var objTop=divObj.style.top;
//获取类样式的方法
currentStyle
getComputedStyle()
var divObj=document.getElementById("test");
var objTop= divObj.currentStyle.top;
var objTop =document.defaultView.getComputedStyle(divObj,null).top;
4.2广告案例
随鼠标滚动的广告图片
使用currentStyle或getComputedStyle() 可以获得层在网页中的位置，但是如何获取滚动条滚动的距离呢？
4.2.1用法
一个图片在浏览器的右侧，当鼠标滚动时，图片随滚动条滚动，如图所示
语法：
- document.documentElement.scrollTop;
- document.documentElement.scrollLeft;
制作随鼠标滚动的广告图片实现思路：
- 图片放在一个层中，使用CSS样式设置层的初始位置
- 页面加载时，获取图片所在层的具体位置，即页面的left和top位置
- 获取页面初始位置时，要判断当前浏览器的类型，本例只判断是IE还是fireFox
- 当滚动条滚动时，获取滚动条距离页面顶端和左侧的距离，同时改变层距离顶端和左侧的位置
<style type="text/css">
#main {
text-align: center;
}
#adver {
position: absolute;
left: 50px;
top: 30px;
z-index: 2;
}
</style>
</head>
<body>
<div id="adver">
<img src="img/adv.jpg">
</div>
<div id="main">
<img src="img/main1.JPG">
<img src="img/main2.JPG">
<img src="img/main3.JPG">
</div>
</body>
<script type="text/javascript">
var adverTop; //层距页面顶端距离
var adverLeft;
var adverObject; 层对象
function inin() {
adverObject = document.getElementById("adver"); //获得层对象
if (adverObject.currentStyle) {
adverTop = parseInt(adverObject.currentStyle.top);
adverLeft = parseInt(adverObject.currentStyle.left);
} else {
adverTop = parseInt(document.defaultView.getComputedStyle(adverObject, null).top);
adverLeft = parseInt(document.defaultView.getComputedStyle(adverObject, null).left);
}
}
function move() {
adverObject.style.top = adverTop + parseInt(document.documentElement.scrollTop) + "px";
adverObject.style.left = adverLeft + parseInt(document.documentElement.scrollLeft) + "px";
}
window.onload=inin;
window.onscroll=move;
</script>
3588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
