<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="para" onclick="change()">点我试试</p>
<script>
function change() {
var oPara = document.getElementById("para");
oPara.align = "right";
oPara.style.color = "red";
// font-size 在js中调用，需要通过去掉中间的横线，且后一个单词首字母大写来实现
// 带横线的都如此
oPara.style.fontSize = "48px";
oPara.innerHTML = "通过DOM操作P元素";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img id="ngd" src="image/南瓜灯off.jpg" onclick="light()">
<script>
//var f=0;
function light(){
var oNgd=document.getElementById("ngd");
// if(oNgd.src=="image/南瓜灯1.jpg") 在浏览器中src是绝对路径，不能用相对路径去和它做判断
//可以设置一个变量
//if(f==0)
//去找命名中的字母，数字和汉字不行
//if(oNgd.src.indexOf("off")!=-1)
if(oNgd.src.match("off")){
oNgd.src="image/南瓜灯on.jpg";
// f=1;
}else{
oNgd.src="image/南瓜灯off.jpg";
// f=0;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 300px;
background-color: gray;
margin: 50px auto;
padding: 15px;
}
#box p:last-child{
text-align: right;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="背景色" onclick="changebj()">
<p id="para1">那非法哈佛哈佛法啊发啊额发色鬼虽然给是如果是给是人给虽然给认识给虽然给虽然给虽然给人参果虽然给虽然给认识给虽然给虽然给虽然给虽然过生日给虽然给色弱饿啊日四个人参果如果认识更是给是给二十个的</p>
<p id="para2" onclick="fun()">收缩</p>
</div>
<script>
function fun(){
var op1=document.getElementById("para1");
var op2=document.getElementById("para2");
if(op2.innerHTML=="收缩"){
op1.innerHTML="那非法哈佛哈佛法啊发啊额发色...";
op2.innerHTML="展开";
}else{
op1.innerHTML="那非法哈佛哈佛法啊发啊额发色鬼虽然给是如果是给是人给虽然给认识给虽然给虽然给虽然给人参果虽然给虽然给认识给虽然给虽然给虽然给虽然过生日给虽然给色弱饿啊日四个人参果如果认识更是给是给二十个的";
op2.innerHTML="收缩";
}
}
function changebj(){
var odiv=document.getElementById("box");
var r=parseInt(Math.random()*256);
var g=parseInt(Math.random()*256);
var b=parseInt(Math.random()*256);
odiv.style.backgroundColor="rgb("+r+","+g+","+b+")";
}
</script>
</body>
</html>
