您的位置：首页 > Web前端 > JavaScript

黑马程序员_JavaScript案例（一）

2015-03-16 13:30 197 查看

------- android培训、java培训、期待与您交流！ ----------

这一段时间学习了JavaScript，使用JavaScript做了几个案例。

1、JS控制网页字体大小

2、JS控制某个部分显示或者隐藏

3、菜单切换效果

4、广告漂浮效果

1、JS控制字体大小，在网页上有一句话，还有两个按钮，一个按钮是变大，一个按钮是变小，当我点击变大按钮时，文字会比原来大，当我点击变小时，文字就会缩小。

首先写一个普通的html页面

<html>
<head>
<title>JS改变字体大小</title>
</head>
<body>
<div id="div1">
把我变了
</div>
<input type="button" value="变大"" />
<input type="button" value="变小" />
</body>
</html>

这时给两个按钮分别添加点击事件

oncick="changeBig()"和onclick="changeSmall()"

写完以后我们需要在head标签内添加JavaScript.

我们要控制字体的大小，首先需要通过document对象获取到要控制的字体的对象，通过对象去更改div内的样式，这样就可以达到更改字体大小的效果了

<script type="text/javascript">
var x = 50;//设置全局变量，用于控制字体的大小
function changeBig(){
var div1 = document.getElementById("div1");	 //获取div对象
div1.style.fontSize = x+"px";  //修改div样式
x = x + 10;

}
function changeSmall(){
x = x - 10;
var div1 = document.getElementById("div1");
div1.style.fontSize = x + "px";
}
</script>

至此，使用JS控制字体更改大小的效果就已经完成了。

2、JS控制某个部分显示或者隐藏

在CSS中让网页中的某个部分隐藏的话，用两种方式，一种方式是display，一种方式是 visibility。

display和visibility不同的地方在于用display控制的对象，隐藏之后不会在占有网页空间，而visibility控制的对象隐藏之后

还会占有网页空间。

同样我们要完成这样的效果也是需要通过更改css样式来达到我们的目的。

首先，完成的是html页面，页面上同样是两个按钮和一句话，按钮则是显示和隐藏按钮

<html>
<head>
<title>JS控制显示和隐藏</title>
</head>
<body>
<div id="div1">
把我变了
</div>
<input type="button" value="给我显示" />
<input type="button" value="给我隐藏" />
</body>
</html>

对两个按钮分别添加鼠标点击事件

onclick="show()"和onclick="hidden"

接着我们需要的是通过需要被显示或者隐藏的id获取对应的对象进而控制文字的显示或者隐藏

下面是JS的代码

<script type="text/javascript">
function hide(){
var div1 = document.getElementById("div1");	 //获取div对象
div1.style.visibility = "hidden";
//div1.style.display = "none";

}
function show(){
var div1 = document.getElementById("div1");
div1.style.visibility = "visible";
//div1.style.display = "block";
}
</script>

至此，第二个例子同样完成了

总结，我们使用JavaScript做出一些我们期望的效果其实是通过js去获取对象，使用对象去更改css样式。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航