169.操作元素的基本流程
一．JS操作元素的基本方法
*因为JS放在文档的最上面，所以要使用window.onload,在页面加载完成后运行JS的代码。
二．操作body标签示例
<script type=”text/javascript”>
console.log (document.body);
document.body.style.background=”red”;
var a=”pink”;
document.body.style.backgroun=a;
document.getElementById(“book”); *选中id为book的元素
document.getElementById(“book”).style.width=”500px”; *更改元素的宽度
document.getElementById(“book”).style.backgroundColor=”blue”; *遇到-，可以更改为驼峰命名
</script>
<body>
<div id=”book”><div>
</body>
170.给予元素点击事件
<style type=”text/css”>
#book{width:200px;height:200px;border:1px solid black}
</style>
<script type=”text/javascript”>
window。onload=function(){
//选中ID为book的元素，给予一个点击事件
document.getElementById(“book”).onclick=function(){
alert(“1”);
};
//选中ID为book的元素，给予一个点击事件，改变元素的 背景和宽和高。
var needBook=document.getElementById(“book”) *赋值为变量
needBook.onclick=function(){
needBook.style.width=”500px”;
needBook.style.height=”500px”;
needBook.style.backgroudColor=”blue”;
}
//或者直接把要改变的样式封装成函数，直接赋值给点击的事件；
function a(){
needBook.style.width=”500px”;
needBook.style.height=”500px”;
needBook.style.backgroudColor=”blue”;
};
needBook.onclick=a;
};
</script>
<body>
<div id=”book”><div>
</body>
171.练习题：使用JS给与元素相应的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
li{height: 200px;width: 100%;border-bottom: 1px dashed #ccc;}
li>div{width: 50%;height: 100%;float: left;}
.needNode,.rightNode{position: relative;}
.needNode .line{height: 100%;width: 0;border-right: 1px dashed #ccc;position: absolute;right: 0;top: 0;}
button{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;height: 20px;width: 40px;}
.leftNode{width: 100px;height: 100px;border: 1px solid ;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}
</style>
<script type="text/javascript">
onload=function(){
//获取所有button元素
var butOne=document.getElementById("butOne"),
butTwo=document.getElementById("butTwo"),
butThree=document.getElementById("butThree"),
butFour=document.getElementById("butFour"),
//获取所有需要操作的div元素
one=document.getElementById("one"),
two=document.getElementById("two"),
three=document.getElementById("three"),
four=document.getElementById("four");
//添加改变元素样式的点击事件
butOne.onclick=function(){
one.style.background="red";
};
butTwo.onclick=function(){
two.style.background="green";
two.style.width="350px";
};
butThree.onclick=function(){
three.style.background="yellow";
three.style.width="350px";
three.style.height="150px";
};
butFour.onclick=function(){
four.style.background="pink";
four.style.marginLeft="0px";
four.style.width=four.style.height="10%";
};
};
</script>
</head>
<body>
<!--------布局由一个ul包含4个li完成-------->
<ul>
<!--------每个li里包含2个div元素，一个左边一个右边-------->
<li>
<div class="needNode"><!--------每个li里包含2个div元素-------->
<div class="line"></div><!--------中间线元素-------->
<!--------需要改变样式的div-------->
<div class="leftNode" id="one"></div>
</div>
<div class="rightNode">
<button id="butOne">改变</button>
</div>
</li>
<li>
<div class="needNode">
<div class="line"></div>
<div class="leftNode" id="two"></div>
</div>
<div class="rightNode">
<button id="butTwo">改变</button>
</div>
</li>
<li>
<div class="needNode">
<div class="line" ></div>
<div class="leftNode" id="three"></div>
</div>
<div class="rightNode">
<button id="butThree">改变</button>
</div>
</li>
<li>
<div class="needNode">
<div class="line"></div>
<div class="leftNode" id="four"></div>
</div>
<div class="rightNode">
<button id="butFour">改变</button>
</div>
</li>
</ul>
</body>
</html>
172.练习题：JS广告弹窗效果
#没有找到素材
173.使用JS控制元素的ID和类
一．JS控制元素ID和类
<script type=”text/javascript”>
window。onload=function(){
var needId= document.getElementById(“book”);
needId.id=”abc”; *修改元素的ID
needId.className=”kkkkk abcd”; *修改元素的类，注意类一定是className
//通过一个点击事件改变元素的类
needId.onclick=function(){
this.className=”abck”；
};
};
</script>
<body>
<div id=”book”><div>
</body>
174.。逗号和中括号的使用方法
一，逗号表示话没说完
var a;
var b;
var c;
可以用逗号：
var a,b,c;
二．中括号相当于一个。
a.style.width=”25px”;
a[“style”].width=”25px”;
a.style.backgroun=”red”;
a[“style”][“background”]=”red”;
a.onclick=function(){};
a[“onclick”]=function(){};
三．运用范例：
function go(s,c){ *封装一个改变样式的函数
a.style[s]=c;
};
a.onclick=function(){ *通过一个事件给go函数传入两个参数，达到改变样式的效果。
go(“color”,”red”);
};
175.练习题-点击改变链接指向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#bad{position: absolute;left: 0;right: 0;margin: 50px auto;width: 450px;}
.btn{width: 100%;position: fixed;bottom: 100px;text-align: center;}
.btn button{display: inline;margin: 0 50px;}
</style>
<script type="text/javascript">
onload=function(){
function goSet(href,src,width){
needLink.href=href;
bad.src=src
bad.style.width=width;
};
bd.onclick=function(){
goSet("https://baidu.com","百度.png","450px")
};
wy.onclick=function(){
goSet("https://study.163.com/","网易云课堂.png","400px")
};
cto.onclick=function(){
goSet("https://www.51cto.com/","淘宝.jpg","400px")
};
jd.onclick=function(){
goSet("https://www.JD.com/","京东.jpg","300px")
};
};
</script>
<!-------函数封装的细节
<script type="text/javascript">
onload=function(){
bd.onclick=function(){
needLink.href="https://baidu.com";
bad.src="百度.png";
bad.style.width="";
};
wy.onclick=function(){
needLink.href="https://study.163.com/";
bad.src="网易云课堂.png";
bad.style.width="400px";
};
cto.onclick=function(){
needLink.href="https://www.51cto.com/";
bad.src="淘宝.jpg";
bad.style.width="400px";
};
jd.onclick=function(){
needLink.href="https://www.JD.com/";
bad.src="京东.jpg";
bad.style.width="300px";
};
};
</script>------->
</head>
<body>
<a href="https://www.baidu.com/" target="_blank" id="needLink"><img src="百度.png" id="bad"></a>
<div class="btn">
<button id="bd">百度</button>
<button id="wy">网易云课堂</button>
<button id="cto">淘宝</button>
<button id="jd">京东</button>
</div>
</body>
</html>
176.使用JS获取节点名称
示例：
Window.onload=function(){
var div=document.getElementById(“div”);
div.onclick=function(){
alert(this.nodeName)；
};
}；
177.使用JS操作input内容
Window.onload=function(){
var text=document.getElmentById(“text),
btn=document.getElmetById(“btn”),
Btn.onclick=function(){
console.log(text.value);
};
};
178.input内容改变事件
window.onload=function(){
var ipt=document.getElementById(“ipt”),
divOne=document.getElementById(“divOne”);
//onchange 是value改变的当前元素失去焦点时触发
ipt.onchange=function(){
divOne.style.width=divOne.style.height=ipt.value+”px”;
};
//oninput 当前value改变就会触发的事件
ipt.oninput=function(){
divOne.style.width=divOne.style.height=ipt.value+”px”;
}；
};
179.练习题-创建-创建独一无二的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
ul{height: 150px;width: 100%;border-bottom: 1px dashed #ccc;}
ul li{width: 20%;float: left;height: 100%;position: relative;text-align: center;}
ul li .line{position: absolute;right: 0;height: 100%;width: 0;border-right: 1px dashed #ccc;}
.needDiv{width: 100px;height: 100px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: red;border: 1px solid black;}
.height{height: 30px;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul>
<li>
<div class="line"></div>
<div class="height"></div>
宽度：<input type="range" min="0" max="400" value="100" id="iptw"> <br>
高度：<input type="range" min="0" max="400" value="100" id="ipth">
</li>
<li>
<div class="line"></div>
<div class="height"></div>
左边框宽度：<input type="range" min="0" max="100" value="1" id="iptl"> <br>
右边框宽度：<input type="range" min="0" max="100" value="1" id="iptr"> <br>
上边框宽度：<input type="range" min="0" max="100" value="1" id="iptt"> <br>
下边框宽度：<input type="range" min="0" max="100" value="1" id="iptb">
</li>
<li>
<div class="line"></div>
<div class="height"></div>
左边框颜色：<input type="color" id="iptlcl"> <br>
右边框颜色：<input type="color" id="iptrcl"> <br>
上边框颜色：<input type="color" id="ipttcl"> <br>
下边框颜色：<input type="color" id="iptbcl">
</li>
<li>
<div class="line"></div>
<div class="height"></div>
元素颜色：<input type="color" id="domcl" >
</li>
<li>
<div class="height"></div>
<input type="button" value="生成独一无二的元素" id="creat">
</li>
</ul>
<div class="needDiv" id="needDiv"></div>
<script type="text/javascript">
iptw.oninput=function(){
needDiv.style.width=iptw.value+"px";
};
ipth.oninput=function(){
needDiv.style.height=ipth.value+"px";
};
iptl.oninput=function(){
needDiv.style.borderLeftWidth=iptl.value+"px";
};
iptr.oninput=function(){
needDiv.style.borderRightWidth=iptr.value+"px";
};
iptt.oninput=function(){
needDiv.style.borderTopWidth=iptt.value+"px";
};
iptb.oninput=function(){
needDiv.style.borderBottomWidth=iptb.value+"px";
};
iptlcl.oninput=function(){
needDiv.style.borderLeftColor=iptlcl.value;
};
iptrcl.oninput=function(){
needDiv.style.borderRightColor=iptrcl.value;
};
ipttcl.oninput=function(){
needDiv.style.borderTopColor=ipttcl.value;
};
iptbcl.oninput=function(){
needDiv.style.borderBottomColor=iptbcl.value;
};
domcl.oninput=function(){
needDiv.style.background=domcl.value;
};
creat.onclick=function(){
var newWin=open("http://baidu.com");
newWin.document.write("这是你定制的元素");
newWin.document.write("<div style='width: 100px;height: 100px;background-color: red;border: 1px solid black;width:"+iptw.value+"px;height:"+ipth.value+"px;border-left-width:"+iptl.value+"px;border-right-width:"+iptr.value+"px;border-top-width:"+iptt.value+"px;border-bottom-width:"+iptb.value+"px;border-left-color:"+iptlcl.value+";border-righr-color:"+iptrcl.value+";border-top-color:"+ipttcl.value+";border-bottom-color:"+iptbcl.value+"'></div> ");
};
</script>
</body>
</html>
478
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
