标签：function style JavaScript 元素 BOM background var document 编程
Hello! 大家好，我们又见面啦~接下来让我们学习今天的小知识吧~
一.如何在JS中获取HTML元素？
详细讲解：
1.通过标签中的id属性
document.getElementById();
eg:
<1>.首先我们来定义一个按钮和div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 50px;
background: skyblue;
display: inline-block;
}
</style>
</head>
<body>
<button>更改颜色</button>
<div id="d1" ></div>
</body>
</html><2>.然后在body里写一个script标检，然后在script标检中写一个函数
<script>
function f(){
//Element 元素标检
//id选择器
var d= document.getElementById("d1")
d.style.background="yellow";
//还有一种直接使用id(虽然直接使用id会更方便,但是在某些低版本是用不了的,所以使用id选择器比较保险)
// d1.style.background="pink";
}
</script><3>.然后再按钮中写一个调用就可以了
<body>
<button onclick="f()">更改颜色</button>
<div id="d1" ></div>
</body>2.通过标签名
document.getElementsByTagName();
这是大概的使用的方法：
<body>
<button onclick="f1()">更改颜色</button>
<div id="d2"></div>
<script>
function f1(){
//标检选择器 会拿出多个元素
var ds=document.getElementsByTagName("div");
//Cannot set properties of undefined(setting 'background')
//不能 设置 属性 来自 未定义 (设置 'background' 的时候报的错)
//用foreach
for(let i of ds){
//i就是每一个元素
i.style.background="purple";
}
}
</script>
</body>
3.通过标检中的class属性
document.getElementsByClassName();
<1>.首先在body里面定义一个div，给它定义一个class名
<div id="d1" class="a"></div>
<div id="d2" class="a"></div><2>.然后在script标检中写一个函数
function f2(){
//类选择器
//在选择器中,因为class是关键字,所以一般class就叫做 ClassName
var s=document.getElementsByClassName("a")
for( var i of s){
i.style.background="red";
}
}<3>.最后定义一个按钮调用那个函数
<button onclick="f2()">更改颜色</button>4.通过标签中的name属性
document.getElementsByName();
二.HTML元素上的常用事件
| onclick | 点击事件 |
|---|---|
| ondblclick | 双击事件 |
| onfocus | 获得焦点事件 |
| onblur | 失去焦点事件 |
| onmouseover | 鼠标移入 |
| onmouseout | 鼠标移出 |
1.eg:(获得焦点事件和失去焦点事件)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上课代码04</title>
</head>
<body>
<!-- <input type="text" onfocus="" onblur=""> -->
<!-- value 只能用在输入框和哪些 只能那具备了value属性的值 -->
<!-- style:标检中的style属性 -->
<!-- 怎么给元素赋值 -->
<!-- 在遍历元素时怎么不报错 -->
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<button onclick="ff('嘿嘿')">嘿嘿</button>
<button onclick="ff('咳咳')">咳咳</button>
<script>
function ff(a){
//拿到值
var d=document.getElementsByTagName("input");
//遍历元素
for(let i of d){
i.value=a;
}
}
//找到页面中所有的输入框
//给所有的输入框赋值(失去焦点事件,获得焦点事件)
(()=>{ //匿名函数
var d1=document.getElementsByTagName("input");
//只要碰到foreach循环 不能用 var 使用let(定义局部变量)
for(let i of d1){
//给元素的获得焦点事件赋值
i.onfocus=()=>{ i.value="" };
//给元素的失去焦点事件赋值
i.onblur=()=>{ i.value="你吃baba"};
}
})();
</script>
</body>
</html>
三.HTML元素上的常用属性
| textContent | 标签的文本内容（定义的标签不生效） |
|---|---|
| innerHTML | 标签中的html内容(标签会生效) |
| value | 元素的值（适用具备value属性的元素） |
| checked | 是否被选中（适用于单选框和多选框） |
| style | 标签中的style属性（用于设置样式） |
四.控制元素的显示
| none | 不显示（页面不会有空间） |
|---|---|
| block | 以块状元素显示 |
| inline | 以行内元素显示 |
| inline-block | 以行块显示 |
大概使用方法：
<script>
function c(){
//如果隐藏,那么显示
if(d5.style.display==="none"){
d5.style.display="block";
}else{//如果显示,那么隐藏
d5.style.display="none";
}
}
</script>
| visible | 可见 |
|---|---|
| hidden | 不可见（会占据页面空间） |
| 0~1之间的值 |
|---|
| 用于控制元素的透明度 |
eg:
function c1(){
//如果透明度为0,那么把它调成1 0为透明 1为不透明
if(d5.style.opacity==0){
d5.style.opacity=1;
}else{//如果显示,那么隐藏
d5.style.opacity=0;
}
}五. 案例：（实现表格中的全选按钮功能）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例1</title>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" onclick="n(this.checked)"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
</tr>
</table>
<script>
//checked 检查当前是否被选中
function n(zt){
//接收当前的状态
var is=document.getElementsByTagName("input");
//拿到所有的多选框
//给多选框的状态:以第一个框为标准
for(let i of is){
//i就是每一个多选框
i.checked=zt;
}
}
</script>
</body>
</html>
六.使用js制作图片自动切换效果
<1>.导入三张图片，分别取名叫a0.jpg; a1.jpg; a2.jpg
<2>.然后看下面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 500px;
height: 400px;
background: url(images/a0.jpg) ;
}
</style>
</head>
<body>
<div id="d1"></div>
<img id="m1" src="images/a0.jpg" width="300px">
<button onclick="f1()">点我更新图片</button>
<script>
var b=1;
setInterval(()=>{
d1.style.backgroundImage='url("images/a'+(b%3)+'.jpg")'
b++;
},1000);
function f1(){
m1.src="images/a1.jpg";
}
</script>
</body>
</html>
好啦，今天我们的小课堂已经到此为止啦~ 下次会越来越精彩的！对啦，送大家一句话，很现实也很坚定：每条路都很难走，但是一旦选择了，就一定要走下去，加油！家人们，期待你们，也期待我们以后的蜕变！
标签：function,style,JavaScript,元素,BOM,background,var,document,编程 来源： https://blog.csdn.net/weixin_65975275/article/details/123209493
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。