javacriptBOM编程

「已注销」

已于 2022-03-03 11:53:51 修改

阅读量304

点赞数 3

文章标签： html webview javascript

于 2022-03-02 23:48:31 首次发布

本文链接：https://blog.csdn.net/qq_64164870/article/details/123243330

版权

使用getElementByID()方法访问DOM元素

使用getElementsByName()方法访问DOM元素

使用getElementsByTagName()方法访问DOM元素方法

方法描述

getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

实现操作元素和操作属性更改图片

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       div{
           width:400px;
           height:300px;
           background:url("img/1.webp")center/cover;
       }
       </style>
   </head>
   <body>
       <div id="d1">
       </div>
       <img id="m1" src="img/1.webp" alt="">
       <button οnclick="fn1()">点击更改图片</button>
   </body>
<script>
var a=1;
//箭头函数是普通函数的简写
setInterval(()=>{
   //操作元素（html）的css
   d1.style.backgroundImage='url("img/'+(a%3)+'.webp")'
   a++
},1000)

function fn1(){
   //操作属性
   m1.src="img/2.webp"
}
</script>
</html>

使用display样式属性控制元素的隐藏和显示

<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       div{
           width: 300px; height:250px;
           background: red;

       }
       </style>
   </head>
   <body>
       <div id="d1"></div>
       <br>
       <button οnclick="fn1()">点击隐藏</button>
       <button οnclick="fn2()">点击出现</button>
       <script>

       function fn1(){
           d1.style.display="none"
       }
       function fn2(){
           d1.style.display="block"
       }
       </script>
   </body>

</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<input type="text"><input type="text"><input type="text">
	<input type="text"><input type="text"><input type="text">
	<input type="text"><input type="text"><input type="text">
	<input type="text"><input type="text"><input type="text">
	<input type="text"><input type="text"><input type="text">
	<input type="text"><input type="text"><input type="text">
	<input type="text"><input type="text"><input type="text">
	<input type="text"><input type="text"><input type="text">
	<input type="text"><input type="text"><input type="text">
	<input type="text"><input type="text"><input type="text">
	<br>
	<button onclick="fn1('圣诞节')">圣诞节</button>
	<button onclick="fn1('万圣节')">万圣节</button>
	<script>
		function fn1(a){
			//拿到所有输入框
			var b=document.getElementsByTagName("input")
			//更改值
			for(let i of b){
				i.value=a;
				
			}
		}
		//找到页面中所有的输入框
		//给所有输入框赋值（失去焦点事件，获得焦点事件）
		(()=>{
			var is=document.getElementsByTagName("input")
			for(let i of is){
				//给元素获得焦点事件赋值
				i.onfocus=()=>{
					i.value=""
				}
				//给元素失去焦点赋值
				i.onblur=()=>{
					i.value="春节"
					
				}
			}
		})();
		
		
		
	</script>
	</body>
</html>

「已注销」

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javacriptBOM编程

实现操作元素和操作属性更改图片<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div{ width:400px; height:300px; background:url...
复制链接

扫一扫