DOM

最新推荐文章于 2023-01-03 20:23:14 发布
最新推荐文章于 2023-01-03 20:23:14 发布
阅读量157 收藏
点赞数
分类专栏： dom 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LW0512/article/details/108835462
版权

点击按钮添加指定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn" value="按钮">
		<input type="text" value="真好" id="in">
		<input type="text" name="" id="pu" value="" />
		<select name="" id="">
			<option value="0">1</option>
			<option value="0">2</option>
			<option value="0" id="op">3</option>
			<option value="0">4</option>
		</select>
		<script type="text/javascript">
			document.getElementById("btn").onclick = function (){
				document.getElementById("op").selected = true;
				document.getElementById("in").readOnly = "345";
				document.getElementById("pu").disabled = true;
			}
		</script>
	</body>
</html>

点击按钮修改div的宽高属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn">
		<div id="d1"></div>
		<script type="text/javascript">
			//根据id属性获取此文档中的元素btn.注册点击事件
			document.getElementById("btn").onclick = function (){
				//根据id属性获取此文档中元素d1
				var div = document.getElementById("d1");
				div.style.width = "300px";
				div.style.height = "200px";
				div.style.backgroundColor = "red";
			}
		</script>
	</body>
</html>

点击按钮显示与隐藏指定内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div#d1{
				width:300px;
				height: 300px;
				background-color:plum;
			}
			
		</style>
	</head>
	<body>
		<input type="button" id="btn1" value="隐藏">
		<input type="button" id="btn2" value="显示">
		<div id="d1"></div>
		<script type="text/javascript">
			//
			function mFun$(id){
				return document.getElementById(id);
			}
			mFun$("btn1").onclick = function(){
				mFun$("d1").style.display = "none";	
			};
			
			mFun$("btn2").onclick = function(){
				mFun$("d1").style.display = "block";
			};
		</script>
	</body>
</html>

点击按钮隐藏域显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div#d1{
				width:300px;
				height: 300px;
				background-color:plum;
			}
		</style>
	</head>
	<body>
		<input type="button" id="btn" value="隐藏">
		<div id="d1">
			
		</div>
		<script type="text/javascript">
			//根据id属性获取指定元素并注册事件 点击
			document.getElementById("btn").onclick = function (){
				//如果 这个对象的value值 等于隐藏
				if(this.value == "隐藏"){
					//获取id为d1的div元素 添加样式为隐藏
					document.getElementById("d1").style.display = "none";
					//这个对象的value值等于显示
					this.value = "显示";
				}else if(this.value == "显示"){
					document.getElementById("d1").style.display = "block";
					this.value = "隐藏";
				}
			}
			
		</script>
	</body>
</html>

点击按钮为div添加样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.c1{
				width:300px;
				height: 300px;
				background-color:plum;
			}
		</style>
	</head>
	<body>
		<input type="button" id="btn" value="按钮">
		<div id="d1"></div>
		<script>
			function mFun$(id){
				return document.getElementById(id);
			}
		mFun$("btn").onclick = function (){
			mFun$("d1").className = 'c1';
		}
		</script>
	</body>
</html>

点击按钮让整个页面火起来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.b{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<input type="button" id="btn" value="按钮">
		<script type="text/javascript">
			document.getElementById("btn").onclick = function 
			document.body.className = document.body.className !== "b"?"b":"";
			}
			//使用三元运算符
		</script>
	</body>
</html>

点击按钮给列表添加样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<input type="button" id="btn" value="按钮">
		<ul id="ul">
			<li>老大</li>
			<li>老二</li>
			<li>小三</li>
			<li>小四</li>
			<li>老五</li>
		</ul>
		<script>
			document.getElementById("btn").onclick = function(){
				document.getElementById("ul").style.backgroundColor = "greenyellow";
			}
			//隔行变色 奇数为粉嫩嫩  偶数 黄绿黄绿
		</script>
	</body>
</html>

隔行换色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn" value="按钮">
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
			<li>444</li>
			<li>555</li>
			<li>666</li>
		</ul>
		<script>
			//条件表达式?真:假;
			document.getElementById("btn").onclick = function (){
				var li = document.getElementsByTagName("li");
				// console.log(li);
				for(var i = 0; i < li.length;i++){
// 					if(i%2 == 0){
// 						li[i].style.backgroundColor = "greenyellow";
// 					}else{
// 						li[i].style.backgroundColor = "deeppink";
// 					}
					li[i].style.backgroundColor = i%2==0?"greenyellow":"deeppink";
				}
				//改成三元运算符的
			}
			/*
				鼠标进入事件 onmouseover
				
				鼠标离开事件 onmouseout
				
				根据样式名字来获取元素  document.getElementsByClassName
				
				设置标签中的文本内容
					innerText  innerContent  innerHTML
			*/
		</script>
	</body>
</html>
LW0512
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】实现element圆角按钮效果
洛尧的博客
02-02 1171
实现element圆角按钮效果。为什么要来写这个组件，是因为没找到加选中状态的参数，写完之后知道了，加class就可以了。
element-ui
大菠萝
03-27 582
type="flex"，采用flex布局，搭配justify="center|end|space-between|space-around"，默认start。:xs、:sm、:md、:lg、 :xl，响应式布局，值是占有的份数。:gutter，间隙，不会占span的份数。:span，占的份数，共24份。:offset，偏移量。
Bootstrap table表格初始化表格数据的方法
10-18
主要介绍了Bootstrap-table表格初始化表格数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
bootstrap-table为空_bootstrap-table介绍
weixin_39878745的博客
12-21 290
刷新表格：$table.bootstrapTable('refresh');获取选择的行：$table.bootstrapTable('getSelections');一：Bootstrap Table 的强大之处说了这么多，Bootstrap Table 的强大之处还是需要用个简单的例子来说明，除了上面用 html 的方式外，这里使用JavaScript 的方式：定义 html(只需要一句话)：...
常用DOM整理
09-03
js在操作DOM中存在着许多跨浏览器方面的坑，本文花了我将近一周的时间整理，我将根据实例整理那些大大小小的“坑”。
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
JavaScript DOM进阶方法
10-24
主要介绍了JavaScript DOM进阶,需要的朋友可以参考下
dom
03-14
DOM
Dom
03-09
Dom
jsx-dom:使用JSX创建DOM元素
04-30
jsx-dom 使用JSX创建DOM元素。 支持ES模块和TypeScript。 安装 npm install --save jsx-dom yarn install jsx-dom 用法 注意： jsx-dom仅是ESM。 如果您绝对需要CommonJS支持，请改用jsx-dom-cjs 。 注意：如果您...
快速解决js动态改变dom元素属性后页面及时渲染的问题
10-22
下面小编就为大家带来一篇快速解决js动态改变dom元素属性后页面及时渲染的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element输入框带历史查询记录
weixin_33804582的博客
01-14 6749
需求描述 页面的查询框增加一下显示历史查找记录 实现及踩坑记录 使用Element带输入建议的输入框来实现此需求。用法详见官网 1. 坑1：不能直接在querySearch里返回数组，一定要调用回调函数cb来处理数据 看了一下例子，建议列表应该是个数组，然后我就在querySearch里直接返回了一个数组： querySearch(q...
Bootstrap Table获取数据为 undefined 时显示“-”
Huayang123_的博客
07-25 6181
能够成功获取到数据，就是有些数据显示-，打印类型是undefined，折腾了半下午，还是自己粗心的问题，错在 columns取值映射中 错误代码如下： { title: '更新时间', field: 'Time ', colspan: 1, rowspan: 2, align: 'center', valign: "middle", },...
element-ul基本使用
qq_60587956的博客
07-01 1325
element-ul
Element Ul快速入门
du_ai_me的博客
01-03 1572
Element Ul快速入门，带你快速上手
python DOM
最新发布
09-29
在Python中，可以使用xml.dom模块进行DOM解析和操作。例如，可以使用以下代码解析一个XML文件并获取其中的元素内容： ``` from xml.dom import minidom # 解析XML文件 dom = minidom.parse('config.xml') # 获取...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值