概述
点击按钮添加指定属性
<!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">
//根据id属性获取此文档中的元素btn.注册点击事件
document.getElementById("btn").onclick = function (){
//根据id属性获取此文档中元素d1
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">
//根据id属性获取指定元素并注册事件 点击
document.getElementById("btn").onclick = function (){
//如果 这个对象的value值 等于隐藏
if(this.value == "隐藏"){
//获取id为d1的div元素 添加样式为隐藏
document.getElementById("d1").style.display = "none";
//这个对象的value值等于显示
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");
// console.log(li);
for(var i = 0; i < li.length;i++){
//
if(i%2 == 0){
//
li[i].style.backgroundColor = "greenyellow";
//
}else{
//
li[i].style.backgroundColor = "deeppink";
//
}
li[i].style.backgroundColor = i%2==0?"greenyellow":"deeppink";
}
//改成三元运算符的
}
/*
鼠标进入事件 onmouseover
鼠标离开事件 onmouseout
根据样式名字来获取元素
document.getElementsByClassName
设置标签中的文本内容
innerText
innerContent
innerHTML
*/
</script>
</body>
</html>
最后
以上就是笑点低太阳为你收集整理的DOM的全部内容，希望文章能够帮你解决DOM所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复