js操作dom元素复制按钮下拉框输入框单选多选常用操作

最新推荐文章于 2024-04-02 00:39:47 发布

在下，杨江河

最新推荐文章于 2024-04-02 00:39:47 发布

阅读量173

点赞数

分类专栏： Mac开发文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Rockandrollman/article/details/128601528

版权

Mac开发专栏收录该内容

294 篇文章 3 订阅

订阅专栏

描述

js操作dom元素复制按钮下拉框输入框单选多选常用操作

正文

function copy(){
	document.getElementById("d2").innerHTML = document.getElementById("d1").innerHTML;
}

function copyText(){
	document.getElementById("text2").value = document.getElementById("text1").value;
}

function fun3(){
	document.getElementById("img1").src="img/huodong.png";
}

function fun4(){
	document.getElementById("ul1").style.backgroundColor="pink";
	document.getElementById("ul1").style.fontSize="20px";
	
}
function fun5(){
	document.getElementById("ul2").className="focus";
	
}

function fun6(){
	var arr = document.getElementsByName("sex");
	for(var i = 0; i < arr.length ; i++){
		alert(arr[i].checked);
	}
}

function fun7(){
	var arr = document.getElementsByName("hobby");
	for(var i = 0; i < arr.length ; i++){
		alert(arr[i].checked);
	}
}

function fun8(){
	alert(document.getElementById("sel").value);
}

function fun9(){
	document.getElementById("sub").disabled="";
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/index6.js"></script>
		<style>
			.focus{
				background-color: skyblue;
				font-size: 30px;
				color: chartreuse;
			}
		</style>
	</head>
	<body>
		<input type="button" value="复制" onclick="copy()"/>
		<input type="button" value="复制" onclick="copyText()"/>
		<input type="button" value="下一张" onclick="fun3()"/>
		<input type="button" value="样式" onclick="fun4()"/>
		<input type="button" value="样式2" onclick="fun5()"/>
		<input type="button" value="单选" onclick="fun6()"/>
		<input type="button" value="多选" onclick="fun7()"/>
		<input type="button" value="下拉" onclick="fun8()"/>
		<input type="button" value="禁用" onclick="fun9()"/>
		
		常用的html的对象的属性
		<div id="d1">
			<pre>
			常见的属性：双标签里的内容：innerHTML
					  表单元素里的内容（值）：value
					  style：样式
			</pre>
		</div>
		<div id="d2">
			
		</div>
		<input type="text" id="text1"/>
		<input type="text" id="text2"/>
		<img src="img/icon.png" id="img1"/>
		
		<ul id="ul1">
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
		</ul>
		
		<ul id="ul2">
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
		</ul>
		
		<input type="radio" value="男" name="sex" checked="checked"/>男
		<input type="radio" value="女" name="sex"/>女
		
		<input type="checkbox" name="hobby" value="111"/>111
		<input type="checkbox" name="hobby" value="222"/>222
		<input type="checkbox" name="hobby" value="333"/>333
		
		<select id="sel">
			<option value="1" selected="selected">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		
		<button type="submit" disabled="disabled" id="sub">注册</button>
		
	</body>
</html>