js操作dom树
修改DOM做两件事:
1: 修改内部文本(innerHtml,textContent)
2. 修改CSS(js使用驼峰命名，css使用a-b命名法)*/
/var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '1em';
js操作demo
下拉框功能实现
<select id="country">
<option>国家</option>
</select>
<select id="city">
<option>城市</option>
</select>
<script>
'use strict';
var country = ['中国', '美国','英国'];
var city = [
['北京', '上海'],
['纽约'],
['伦敦']
];
var cou = document.getElementById("country");
var cit = document.getElementById("city");
//初始化国家下拉列表
for(var i = 0;i < country.length;i++){
var option = new Option();
//赋值
option.appendChild(document.createTextNode(country[i]));
cou.appendChild(option);
}
//为国家下拉列表添加事件
cou.addEventListener('change',function(){
//另城市列表变为初始状态，可以注释掉查看效果
cit.options.length = 1;
//如果国家选择不为默认值
if(cou.selectedIndex != 0){
for(var j = 0; j < city[cou.selectedIndex - 1].length; j++) {
//遍历相应国家的城市
var option2 = new Option(city[cou.selectedIndex - 1][j], city[cou.selectedIndex - 1][j])
cit.options.add(option2)
}
}
})
</script>
全选,全不选,反选实现
<div>
<table border="2px solid red">
<tr>
<td><input type="checkbox" name="love">1号框</td>
<td>上山打老虎</td>
</tr>
<tr>
<td><input type="checkbox" name="love">1号框</td>
<td>上山打老虎</td>
</tr>
<tr>
<td><input type="checkbox" name="love">1号框</td>
<td>上山打老虎</td>
</tr>
<tr>
<td><button onclick="selectAll()">全选</button></td>
<td><button onclick="noSelectAll()">全不选</button><button onclick="reverse()">反转</button></td>
</tr>
</table>
</div>
<script>
function selectAll(){
var arr = document.getElementsByName("love");
for(var i = 0;i < arr.length;i++){
arr[i].checked = true;
}
}
function noSelectAll(){
var arr = document.getElementsByName("love");
for(var i = 0;i < arr.length;i++){
arr[i].checked = false;
}
}
function reverse(){
var arr = document.getElementsByName("love");
for(var i = 0;i < arr.length;i++){
arr[i].checked = !arr[i].checked;
}
}
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/202505.html
