js的属性操作和简单函数
2018-09-16 本文已影响0人
jackmanzhang
更改属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
document.getElementById("bd").title="去去去";
var link1=document.getElementById("link1")
link1.title="去百度"; //将title属性更改
link1.href="https://www.jd.com"; //将href属性重新修改
}
</script>
</head>
<body>
<a href="http://www.baidu.com" title="来来来" id="bd" name="bd">百度</a>
<a href="http://www.baidu.com" id="link1">啦啦啦</a>
</body>
</html>
设置style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function () {
var q=document.getElementById("div1")
q.style.color="red"
q.style.background="green" //没有变量时直接用点
q.style.fontSize="200px"
attr="fontSize"
q.style[attr]="50px" //有变量写在中括号里
alert(q.innerHTML)
alert(q.innerText)
}
</script>
</head>
<body>
<div id="div1">666</div>
</body>
</html>
匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
var s=document.getElementById("box");
s.onclick=function () { //可以在设置功能时不写函数名直接在function(){}中写出功能。
alert('ok')
}
var s1=document.getElementById('box');
function bianliang(sty1,val) { //向函数中传递2个变量时下面的变化如下所示：
s1.style[sty1]=val;
}
bianliang('color','red');
bianliang('background','green');
}
</script>
</head>
<body>
<div id="box">11</div>
</body>
</html>
return 可以设置变量接收返回的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
o=document.getElementById("one");
t=document.getElementById('two');
b=document.getElementById('btn1');
function add(a,b){
c=parseInt(a)+parseInt(b)
return c
}
b.onclick=function(){
val1=o.value;
val2=t.value;
var result=add(val1,val2) //接收函数返回的结果
alert(result)
}
}
</script>
</head>
<body>
<input type="text" id="one">
<input type="text" id="two">
<input type="button" id="btn1" value="相加">
</body>
</html>
if else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 100px;
background-color: #d86aff;
height: 100px;
}
</style>
<script type="text/javascript">
//if -----else
window.onload=function () {
var box=document.getElementById('box');
var btn=document.getElementById('btn1');
alert(box.style.display)
btn.onclick=function () {
if(box.style.display=='none'){
box.style.display='block'
} else {
box.style.display='none'
}
}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="点击">
<div class="box" id="box"></div>
</body>
</html>
运算符的优先级
下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。
image.png
