【无标题】169-179笔记1月18日李游精品前端课程

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”;  *修改元素的IDneedId.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=srcbad.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>

【无标题】169-179笔记1月18日李游精品前端课程相关推荐

【无标题】180-187笔记1月19日李游精品前端课程笔记
180.使用JS获取节点名称<script type="text/javascript">onload=function(){var divNode=document. ...
01网易首页静态页面笔记（李游精品前端课程）
首先cs样式布局都是按照老师讲解的课程一步一步写完 *{margin: 0;padding: 0;list-style: none;text-decoration: none;} /* topNode ...
01网易云首页导航栏html制作（李游精品前端课程笔记）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
377-379自制mac系统（李游精品前端课程笔记）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
【无标题】学习笔记-2022.8.1-8.6
文献阅读笔记5 一.文章信息 1. 作者 Berta Bescos, Jose M. F ´ acil, Javier Civera and Jos ´ e Neira 2.单位 University ...
【无标题】2022年10月22日 20点程序爱生活纳指和恒指反弹的概率还在,但是反弹做空为主。敏感因子第一次出现折价缩小，或许春天不太远，还需要观察！
确定市场形态的敏感因子 - 第一次折价不再扩大结论:市场进入了有部分资金看多的情况,趋势有点不同了,但是也要继续观察是否折价会持续缩小,现在判断可能还是有点早. 但是的确是一个好消息. 我感觉最有 ...
互联网日报 | 6月18日星期五 | 百度与极狐发布量产共享无人车；奈雪的茶预计6月30日登陆港交所；阿里云盘上线PC版...
‍ ‍今日看点 ✦ 神舟十二号载人飞船发射圆满成功,3名航天员顺利进驻天和核心舱 ✦ 百度与极狐联合发布量产共享无人车,首次曝光成本价48万元 ✦ 字节跳动设立古籍保护专项基金,首投千万元修复< ...
互联网晚报 | 2月18日星期五 | 高途宣布停止高中学科辅导服务；小红书启动最严医美专项治理；FF 91量产版2月23日发布...
今日看点 ✦ 我国"东数西算"工程正式全面启动,8地建设国家算力枢纽节点 ✦ 华为投资40亿元进入深圳香蜜湖,建设数字能源总部及研发基地 ✦ 中兴通讯:成立汽车电子产品线,布局并开 ...
微软北京.NET俱乐部免费活动（2010年7月18日）–Visual Studio 2010 敏捷开发与云计算Azure...
感谢您对VS2010一直以来的关注和支持.6月26日微软.NET俱乐部邀请到了多位MVP,针对Visual Studio 2010敏捷开发.Web前端开发与广大北京的.NET俱乐部会员进行互动交流,应 ...

【无标题】169-179笔记1月18日李游精品前端课程

【无标题】169-179笔记1月18日李游精品前端课程相关推荐

最新文章

热门文章