JavaScript 第五章 JavaScript统制CSS-HTML教程-爱易网页

JavaScript 第五章 JavaScript统制CSS

日期：2014-05-17　浏览次数：20679 次

JavaScript 第五章 JavaScript控制CSS

JavaScript 第四章 DOM编程提升

JavaScript 第五章 JavaScript控制CSS

注意：各案例素材已提供下载

1、技术目标

使用style属性制作菜单特效
使用className属性制作菜单特效
使用scrollTop制作随鼠标滚动的广告图片

2、CSS选择器类型

标签选择器
ID选择器
类选择器

3、JavaScript如何操作样式？

通过元素的两个常用属性可操作样式：

style 属性，语法：元素对象.style.样式属性 = "值"
className 属性，语法：元素对象.className = "类样式名"

4、元素的常用事件

一般样式会由元素的事件触发而改变，先了了解下元素的常用事件，

名称??? ?????????????? 描述
====================================
onclick??? ?????????? 当用户单击某个对象时调用事件
onmouseover???? 鼠标移到某元素之上
onmouseout?????? 鼠标从某元素移开
onmousedown??? 鼠标按钮被按下

5、制作菜单特效

效果描述：
当鼠标移动菜单上时，改变菜单样式，使其背景发生变化
鼠标移出菜单时恢复为原来的样式

效果图：

要实现该效果，可以考虑两种方案，

方案1：使用style属性

方案1，示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用style改变样式</title>
<style type="text/css">
li{
    font-size: 12px;
    color: #ffffff;
    background-image: url(images/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>
<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(images/bg2.gif)";
    }
    len[i].onmouseout = function(){
        //鼠标移出列表项时，改变背景图片
        this.style.backgroundImage = "url(images/bg1.gif)";
    }
}
</script>
</body>
</html>

方案2：使用className属性

方案2，示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用className改变样式</title>
<style type="text/css">
li{
    font-size: 12px;
    color: #ffffff;
    background-image: url(images/bg1.gif);
    background-repeat: no-repeat;
    text-align: center;
    height: 33px;
    width:104px;
    li

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JavaScript 第五章 JavaScript统制CSS

相关资料更多>

推荐阅读更多>