DOM与JS的交互及if语句

最新推荐文章于 2022-08-22 11:34:58 发布
最新推荐文章于 2022-08-22 11:34:58 发布
阅读量381 收藏
点赞数 1
分类专栏： js7天训练营
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40839934/article/details/86319430
版权

JS ->选取html元素->改动css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian
		</title>
		<style type="text/css">
#myDiv{ width: 100px;
	    height: 100px;
		background: black;
	}
		</style>
		<script type="text/javascript">
			//window.onload = function(){
				//document.getElementById('myDiv').style.width = '200px';
				//setTimeout(function(){
					document.getElementById('myDiv').style.width = '200px';
				//},2000);
			//}
		</script>
	</head>
	<body>
		<div id = "myDiv"></div>
	</body>
</html>

如果写在标签上面，要写window.onload() 

事件 交互的一种

比如：键盘到鼠标

JS跟中文一样，读起来的话，点就是的，函数就是要做的事

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
		<style type="text/css">
#myDiv{ width: 100px;
	    height: 100px;
		background: black;
	}
		</style>
	</head>
	<body>
		<div id = "myDiv"></div>
	<script type="text/javascript">
		var myDiv = document.getElementById('myDiv');
		myDiv.onclick = function(){
			alert(1);
		};
	</script>
	</body>
</html>

在点击黑色框框后，背景变成红色 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
		<style type="text/css">
#myDiv{ width: 100px;
	    height: 100px;
		background: black;
	}
		</style>
	</head>
	<body>
		<div id = "myDiv"></div>
	<script type="text/javascript">
		var myDiv = document.getElementById('myDiv');
		myDiv.onclick = function(){
			//alert(1);
			myDiv.style.background = "red";
		};
	</script>
	</body>
</html>

弹出显示框，之后可以关闭背景 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
		<style type="text/css">
#myDiv{ width: 100px;
	    height: 100px;
		background: black;
	}
		</style>
	</head>
	<body>
		<div id = "myDiv"></div>
		<button id = 'btn'>显示隐藏</button>
	<script type="text/javascript">
		var myDiv = document.getElementById('myDiv');
		var btn = document.getElementById('btn');
		btn.onclick = function(){myDiv.style.display = 'none';}
	</script>
	</body>
</html>

 if(条件成功 == true/自动换成boolean值){

成功执行条件

}

else

{没成功的执行条件 

}

 单击显示隐藏按钮，隐藏，双击则出现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
		<style type="text/css">
#myDiv{ width: 100px;
	    height: 100px;
		background: black;
	}
		</style>
	</head>
	<body>
		<div id = "myDiv"></div>
		<button id = 'btn'>显示隐藏</button>
	<script type="text/javascript">
		var myDiv = document.getElementById('myDiv');
		var btn = document.getElementById('btn');
		btn.onclick = function(){myDiv.style.display = 'none';}
		num = 0;
		btn.onclick = function(){<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
		<style type="text/css">
#myDiv{ width: 100px;
	    height: 100px;
		background: black;
	}
		</style>
	</head>
	<body>
		<div id = "myDiv"></div>
		<button id = 'btn'>显示隐藏</button>
	<script type="text/javascript">
		var myDiv = document.getElementById('myDiv');
		var btn = document.getElementById('btn');
		//btn.onclick = function(){myDiv.style.display = 'none';}
		num = 0;
		btn.onclick = function(){
			num = num + 1;
			//console.log(num);
			if(num % 2 == 1){
				myDiv.style.display = 'none';
			}
			else
			{
				myDiv.style.display = 'block';
			}
		}
	</script>
	</body>
</html>
			num = num + 1;
			console.log(num);
		}
	</script>
	</body>
</html>

 

星雨流星天
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript —— DOM
IF
03-07 214
概念：Document Object Model 文档对象模型 * 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。 * DOM 将 HTML 文档表达为树结构，称为DOM树。 什么是DOM？ DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和...
div标签 if语句用法_HTML Div标签用法示例教程
cunjiu9486的博客
10-05 5813
div标签 if语句用法<div> is a very useful and popular HTML tag. <div> is mainly used to group multiple HTML elements and provide some attributes to this group of elements. As a popular and longti...
JS基础和DOM使用
weixin_48268485的博客
06-28 250
JS基础和DOM使用。
DOM获取页面中标签的方式 DOM操作之设定标签属性 DOM循环问题 DOM操作之标签的样式 特殊标签的获取 获取元素占位
Allen的博客
10-05 531
DOM操作 <div id="div1">我是div1</div> <div class="div2">我是div2</div> <span name="s">我是span1</span> <span name="s">我是span2</span> <span name="s">我是span3</span> <span name="s">我是span4</span&
DOM v-if v-else
最新发布
m0_60746035的博客
08-22 294
{ id:"14", title:"联系电话", valueDom:"telphone", type:'cell' },{ id:"1", title:"车号", valueDom:"vehicleNo", type:'cell' },{ id:"13", title:"身份证号", valueDom:"cardNo", type:'cell' },{ id:"15", title:"住址", valueDom:"address", type:'cell' },
jquery if条件语句的写法
10-22
这里我们将详细探讨jQuery中`if`条件语句的使用方式，以及它如何与JavaScript语法相结合。 首先，我们需要理解的是，jQuery本身并不包含特殊的`if`语句，它是一个库，扩展了JavaScript的功能，特别是简化DOM操作。...
JavaScript DOM编程艺术 第2版
08-01
JavaScript DOM编程艺术是一本深入探讨JavaScript与DOM（文档对象模型）交互的权威指南。DOM是Web页面的结构化表示，JavaScript则是与DOM交互的主要语言，它允许开发者动态更新、添加和删除网页元素，从而实现丰富的...
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
10-20
JavaScript DOM 操作是Web开发中的核心技能之一，它允许开发者通过JavaScript与HTML页面进行交互，实现动态效果和用户交互。本篇文章将详细讲解如何利用DOM操作查找和修改HTML元素的内容及属性。 首先，理解DOM...
当然JS和DOM
02-16
在IT领域，JavaScript（简称JS）和Document Object Model（DOM）是构建动态、交互式Web页面的两大核心技术。本课程“当然JS和DOM”旨在深入讲解这两者的结合，帮助开发者理解如何利用它们来创建功能丰富的前端应用。...
JS(Dom+Bom).docx
02-19
在控制流程方面，JavaScript提供了`if`判断语句，允许根据条件执行不同的代码块。例如： ```javascript var score = 59; if (score >= 90) { // 如果score大于或等于90，则执行这里的代码 } ``` 这只是JavaScript...
JS的框架Polymer中的dom-if和is属性使用说明
10-23
主要介绍了JS的框架Polymer中的dom-if和is属性使用说明,Polymer是Google开发的一款JavaScript框架,需要的朋友可以参考下
前端学习笔记：js 第二天--运算符、流程控制语句IF、循环、函数、变量的作用域、DOM元素控制、抽奖案例
weixin_44519518的博客
07-26 101
运算符： 赋值运算符= += -= *= /= 算数运算符+-*/除以%(求余)余数有正负正负由被除数决定 关系运算符=====!=!==>=<=><得到的都是布尔类型 ==判断值是否相等不考虑类型===判断是否一模一样 逻辑运算符&&与||或!取反 &&只要有一个为假，结果就为假||只要有一个为真，结果就为真 <script> ...
JavaScript与HTML DOM交互
@_囚徒-2018_的家园
08-28 1075
1.HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树： 2.JavaScript和HTML DOM交互 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 （1）JavaScript 能够改变页面中的所有 HTML 元
Polymer template dom-if属性
weixin_34353714的博客
06-22 227
2019独角兽企业重金招聘Python工程师标准>>> ...
#关于JS if条件语句及循环语句详解
weixin_52028170的博客
12-02 960
一、程序结构 ​ 程序结构：程序的执行顺序 ​ 顺序结构 ​ 选择(分支)结构 ​ if语句 ​ if…else ​ if…else if…else ​ switch ​ 循环结构 ​ for ​ while ​ do…while ​
JavaScript的流程控制语句有哪些？怎么使用
weixin_52583582的博客
12-16 296
2.流程控制语句 分类： 顺序结构 分支结构(分支结构、分支语句) ：if-else 循环结构 for while 2.1 分支结构 if if：如果，给一个假设条件，条件成立会执行一个操作 语法：if(条件){ 条件成立执行的代码 } //1.如果有钱(100块),花两块买彩票，中500万 var money = 99; if (money >= 100) { console.log("花两块买彩票，中500万"); console.log("买50
FreeMarker的<#if></#if>标签
weixin_34143774的博客
04-27 5182
1 2 3 4 5 <#iftarget??> xxxx </#if> 　　上面这段代码判断target??是否为null，如果不为null时才可以执行if里面的内容，为null时则不进到 if里面 1 2...
带你玩转vue——DOM节点v-if判断导致的生命周期问题
不吃带叶的
09-21 1047
vue页面在生成过程中，会先加载页面中的DOM元素，如果我们在页面中使用v-if的判断条件，vue在页面加载的时候是不会生成该DOM节点的，如果我们在v-if条件判断的节点上使用this.$refs，则会出现该DOM没有被注册的情况，此时我们需要使用this.forceUpdate();在v-if语句判断生效后重新加载页面DOM节点 。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值