JavaScript入门之函数返回值
2024-10-19 06:20:53
函数返回值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function show(){
return 12;
}
var a=show();
alert(a);
</script>
</head>
<body> </body>
</html>
加法器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function add(a,b){
return a+b;
} alert(add(3,5));
</script>
</head>
<body> </body>
</html>
注意：return无值时，弹出undefined
求和 arguements可变参数组（不定参）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function sum()
{
var result=0;
for(var i=0;i<arguments.length;i++){
result+=arguments[i];
}
return result;
}
alert(sum(12,6,9))
</script>
</head>
<body> </body>
</html>
css（oDiv,'width'）获取样式
css(oDiv,'width','200px')设置样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function css(){
if(arguments.length==2)//获取 如果有2个参数
{
return arguments[0].style[arguments[1]];
}
else{//设置
arguments[0].style[arguments[1]]=arguments[2];
}
}
window.onload = function()
{
var oDiv=document.getElementById('div1');
alert(css(oDiv,'width'));//css(oDiv,'background','green');设置成绿色
} </script> </head> <body> <div id="div1" style="width:200px;height:200px;background: red"></div> </body> </html>
简化，给函数取名
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function css(obj,name,value)
{if(arguments.length==2)//获取 如果有2个参数
{
return obj.style[name];
}
else{//设置
obj.style[name]=value;
}
}
window.onload = function()
{
var oDiv=document.getElementById('div1');
//alert(css(oDiv,'width'));
css(oDiv,'background','green')
}
</script>
</head>
<body>
<div id="div1" style="width:200px;height:200px;background: red"></div>
</body>
</html>
style用于获取行间样式，
获取非行间样式用current，currentStyle只适用于ie浏览器，getComputedStyle适用于火狐和Chrome
<!doctype html><html>
<head>
<title>获取非行间样式</title>
<meta charset="utf-8"/>
<style>#div1{width:200px;height:200px;background:red;}</style>
<script>
window.onload=function(){
//ie
//alert(oDiv.currentStyle.width);
var oDiv=document.getElementById('div1');
//火狐，Chrome
alert(getComputedStyle(oDiv,false).width);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
解决兼容性用if else
<!doctype html><html>
<head>
<title>获取非行间样式</title>
<meta charset="utf-8"/>
<style>#div1{width:200px;height:200px;background:red;}</style>
<script>
window.onload=function(){ var oDiv=document.getElementById('div1');
if(oDiv.currentStyle){//ie
var oDiv=document.getElementById('div1');
}
else{//firefox,chrome
alert(getComputedStyle(oDiv,false).width);
};}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
包装成独立的函数
<!doctype html><html>
<head>
<title>获取非行间样式</title>
<meta charset="utf-8"/>
<style>#div1{width:200px;height:200px;background:red;}</style>
<script>
function getStyle(obj,name){
if(obj.currentStyle){//ie
return obj.currentStyle[name];
}
else{//firefox,chrome
return(getComputedStyle(obj,false)[name]);
}
}
window.onload=function(){
var oDiv=document.getElementById('div1');
alert(getStyle(oDiv,'width'));
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
复合样式：background（color,image,position）
单一样式：width，height
alert(getStyle(oDiv,'backgroundColor'));
最新文章
- ORACLE清理、截断监听日志文件（listener.log）
- dfs 翻棋盘end
- 单例模式ARC和非ARC
- storm源码之storm代码结构【译】【转】
- SQL Server：排名函数row_number,rank,dense_rank,ntile详解
- JQuery教程
- 1.1 让CPU占用率曲线听你指挥[cpu manager]
- MySQL在windows和linux下的表名大小写问题
- 操作系统和Python的发展历程
- asp.net 前后台交互
- jQuery UI 日期控件--datepicker
- 【转】iOS开发UI篇—程序启动原理和UIApplication
- Storm集群中执行的各种组件及其并行
- awk中{print $1}什么意思
- destoon分页
- 大数据 --> Kafka集群搭建
- 《CoderXiaoban团队》第一次作业：团队亮相
- 学习windows编程 day3 之滚动条完善
- 深度学习原理与框架-卷积神经网络-cifar10分类(图片分类代码) 1.数据读入 2.模型构建 3.模型参数训练
- 解决Mac OS下安装MyEclipse报错：Your system does not have sufficient memory to support MyEclipse