点击按钮添加指定属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="btn" value="按钮">
<input type="text" value="真好" id="in">
<input type="text" name="" id="pu" value="" />
<select name="" id="">
<option value="0">1</option>
<option value="0">2</option>
<option value="0" id="op">3</option>
<option value="0">4</option>
</select>
<script type="text/javascript">
document.getElementById("btn").onclick = function (){
document.getElementById("op").selected = true;
document.getElementById("in").readOnly = "345";
document.getElementById("pu").disabled = true;
}
</script>
</body>
</html>
点击按钮修改div的宽高属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="btn">
<div id="d1"></div>
<script type="text/javascript">
document.getElementById("btn").onclick = function (){
var div = document.getElementById("d1");
div.style.width = "300px";
div.style.height = "200px";
div.style.backgroundColor = "red";
}
</script>
</body>
</html>
点击按钮显示与隐藏指定内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div#d1{
width:300px;
height: 300px;
background-color:plum;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="显示">
<div id="d1"></div>
<script type="text/javascript">
function mFun$(id){
return document.getElementById(id);
}
mFun$("btn1").onclick = function(){
mFun$("d1").style.display = "none";
};
mFun$("btn2").onclick = function(){
mFun$("d1").style.display = "block";
};
</script>
</body>
</html>
点击按钮隐藏域显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div#d1{
width:300px;
height: 300px;
background-color:plum;
}
</style>
</head>
<body>
<input type="button" id="btn" value="隐藏">
<div id="d1">
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function (){
if(this.value == "隐藏"){
document.getElementById("d1").style.display = "none";
this.value = "显示";
}else if(this.value == "显示"){
document.getElementById("d1").style.display = "block";
this.value = "隐藏";
}
}
</script>
</body>
</html>
点击按钮为div添加样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.c1{
width:300px;
height: 300px;
background-color:plum;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按钮">
<div id="d1"></div>
<script>
function mFun$(id){
return document.getElementById(id);
}
mFun$("btn").onclick = function (){
mFun$("d1").className = 'c1';
}
</script>
</body>
</html>
点击按钮让整个页面火起来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.b{
background-color:red;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按钮">
<script type="text/javascript">
document.getElementById("btn").onclick = function
document.body.className = document.body.className !== "b"?"b":"";
}
</script>
</body>
</html>
点击按钮给列表添加样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="btn" value="按钮">
<ul id="ul">
<li>老大</li>
<li>老二</li>
<li>小三</li>
<li>小四</li>
<li>老五</li>
</ul>
<script>
document.getElementById("btn").onclick = function(){
document.getElementById("ul").style.backgroundColor = "greenyellow";
}
</script>
</body>
</html>
隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="btn" value="按钮">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
<script>
document.getElementById("btn").onclick = function (){
var li = document.getElementsByTagName("li");
for(var i = 0; i < li.length;i++){
li[i].style.backgroundColor = i%2==0?"greenyellow":"deeppink";
}
}
</script>
</body>
</html>