按钮点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮点击事件</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script type="text/javascript">
/* 文档 -- 获取元素属性id值将信息赋值给 变量btn */
var btn = document.getElementById("btn");
//btn.单击事件调用函数执行弹出窗口
btn.onclick = function(){
alert("123456");
}
</script>
</body>
</html>
单击按钮修改div标签内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单击按钮修改div标签内容</title>
</head>
<body>
<input type="button" id="btn" value="单击显示div标签内容" />
<div id="d1"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
//单独给一个div标签添加内容
//根据id属性获取此文档中的元素 添加注册事件 调用函数
document.getElementById("btn").onclick=function(){
//根据id属性获取此文档中的元素 添加文本内容
//document.getElementById("d1").innerText="就是个div标签";
//根据标签名称获取元素
var div = document.getElementsByTagName("div");
for(var i = 0; i < div.length; i++){
div[i].innerText="就是个div标签";
}
}
</script>
</body>
</html>
单击按钮修改图片属性中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单击按钮修改图片属性中的内容</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<img src="2.jpg" width="400" height="400" title="" border=""/>
<img src="3.jpg" width="400" height="400" title="" border=""/>
<img src="4.jpg" width="400" height="400" title="" border=""/>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var img = document.getElementsByTagName('img');
console.log(img);
for(var i=0; i<img.length; i++){
img[i].width=300;
img[i].height=200;
}
}
</script>
</body>
</html>
显示图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示图片</title>
</head>
<body>
<input type="button" value="显示图片" id="btn"/>
<img src="" id="img"/>
<script type="text/javascript">
/*在js代码中设置图片的宽300高200*/
//根据id属性值获取次文档中的元素input
var btn = document.getElementById("btn");
//根据id属性值获取次文档中的元素img
var img = document.getElementById("img");
//当对btn添加注册事件时 调用这个函数 并对img的src属性进行赋值
btn.onclick = function(){
img.src= "2.jpg";
img.width = "300";
img.heght="200";
}
</script>
</body>
</html>
单击按钮排他事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单击按钮排他事件</title>
</head>
<body>
<input type="button" value="绿了"/>
<input type="button" value="绿了"/>
<input type="button" value="绿了"/>
<input type="button" value="绿了"/>
<input type="button" value="绿了"/>
<input type="button" value="绿了"/>
<script type="text/javascript">
//根据标签名获取指定标签
var input = document.getElementsByTagName('input');
console.log(input);//数组对象
for(var i = 0; i < input.length; i++){
//对每一个input标签注册事件 onclick
input[i].onclick = function(){
for(var j = 0; j < input.length;j++){
input[j].value="绿了";
}
this.value = "红了";
}
}
</script>
</body>
</html>
单击按钮修改input中value的默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单击按钮修改input中value的默认值</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<input type="text" id="input" value="熊大" name="username" />
<script type="text/javascript">
//单击按钮修改一个指定id属性标签中value的默认值
document.getElementById("btn").onclick = function(){
//根据id属性获取指定元素
var input = document.getElementById("input");
console.log(input);
input.value = "熊二";
}
</script>
</body>
</html>
单击按钮修改按钮样式以及默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单击按钮修改按钮样式以及默认值</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<script type="text/javascript">
//根据id属性值获取指定元素
var btn = document.getElementById("btn");
//为btn注册事件 点击按钮 执行以下函数中的内容
btn.onclick=function(){
//btn中type类型修改为单选按钮radio
btn.type="radio";
//btn.checked = "checked";
//btn添加中checked属性 视为默认选中 而checked的值只要不为空或者假即可 ,推荐使用true
btn.checked = "false";
}
</script>
</body>
</html>
单击按钮修改图片属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单击按钮修改图片属性值</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<img src="./2.jpg" alt="" id="im"/>
<script type="text/javascript">
//封装一个函数
function myFun$(id){
return document.getElementById(id);
}
myFun$("btn").onclick = function(){
myFun$("im").width = 300;
myFun$("im").height = 200;
}
</script>
</body>
</html>