描述
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>
运行效果
