举例:
1 当服务端需要对数据进行验证时,使用javascript可以在客户端验证数据,不需要把数据传到服务器端再传回来,比较节省时间。
2 你可以把网页里的内容隐藏起来,然后当鼠标放到某个地方的时候把隐藏的内容显示出来,就像这个页面右上角的”我的知道“那个菜单做的事情。网页里的下拉菜单基本上都使用js完成。
3 当你查看表格的时候,表格的内容很多,你可以使用js给每一行数据设置不同的颜色以示区分,也可以用js完成鼠标指到表格上表格就变色的功能。
4 新闻的幻灯片,可以用JS来做。如果不用JS的话4、5个图片占得地方可是不少。。
5 iGoogle里可以拖来拖去的应用也是用js做的。
6 登录论坛了以后他提示”5秒钟转向你登陆之前查看的页面“
7 还有很多的用途,但是我暂时想不到。。你可以举一反三一下。
css是控制网页外观的,它有以下优点:
1、便于页面的修改。
2、便于页面风格的统一。
3、减少网页的体积。
举例:
假设你有100个页面,每个页面的风格都是一样的,里面都有10个表格。
如果你全部用html来做,就需要给所有的页面的表格里写表格的边框颜色、背景颜色、文字大小(假设这些外观代码要使用3行),那么你就要给1000个表格写这些东西(你就要写3000行。。)。这里面所有的外观设置都是重复的。以后你打算改变表格的风格,你就要改1000个表格。
但是如果你结合HTML和CSS来做,你就可以在每个页面上加上一句
<link href="table.css" rel="stylesheet" type="text/css"/>
然后在table.css这个文件里写上
table{
border:1px solid #ddd
background:#eee
font-size:12px
}
然后你这1000个表格就看起来都一样了。这里只需要写3行代码。
以后你要修改表格,只需要修改table.css里面的这3行代码。
obj.style方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),看下面代码XML/HTML代码
<!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/htmlcharset=utf-8″ />
<title>JS获取CSS属性值</title>
<style type=”text/css”>
<!–
.ss{color:#cdcdcd}
–>
</style>
</head>
<body>
<div id=”css88″ class=”ss” style=”width:200pxheight:200pxbackground:#333333″>JS获取CSS属性值</div>
<script type=”text/javascript”>
alert(document.getElementById(“css88”).style.width)//200px
alert(document.getElementById(“css88”).style.color)//空白
</script>
</body>
</html>
上面这个例子对id为”css88″的div设置了2种烦事的样式,包括style和外部样式class。
从alert出来的信息可以看到,document.getElementById(“css88”).style方法获取不到class为ss的属性和值。
IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法。
另外一个方法是:
XML/HTML代码
<!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/htmlcharset=utf-8″ />
<title>S获取CSS属性值</title>
<style type=”text/css”>
<!–
.ss{background:bluecolor:#cdcdcdwidth:200px}
–>
</style>
</head>
<body>
<p id=”qq” class=”ss” >sdf</p>
<script type=”text/javascript”>
function GetCurrentStyle (obj, prop) {
if (obj.currentStyle) {
return obj.currentStyle[prop]
}
else if (window.getComputedStyle) {
propprop = prop.replace (/([A-Z])/g, “-$1”)
propprop = prop.toLowerCase ()
return document.defaultView.getComputedStyle (obj,null)[prop]
}
return null
}
var dd=document.getElementById(“qq”)
alert(GetCurrentStyle(dd,”width”))
</script>
</body>
</html>
当然,如果您是引用外部的css文件同样适用。
另:可以将上面的方法简化为
JavaScript代码
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]
}