需求：网页开关灯
<style>
.cls{
background: black;
}
</style>
<body>
<input type="button" value="开/关灯" id="btn">
<script> //获取body标签 document.body 拿到body标签
var btn = document.getElementById("btn");
btn.onclick = function(){
document.body.className = document.body.className != "cls" ? "cls" : ""; //用三元运算符进行判断
}
</script>
</body>
需求：点击按钮禁用文本框
<input type="button" value="点击禁用文本框" id="btn">
<input type="text" value="来输入文本" id="txt">
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
document.getElementById("txt").disabled = true;
}
</script>
需求：点击按钮修改列表背景颜色
<input type="button" value="点击修改颜色" id="btn">
<ul id="uu">
<li>鸣人</li>
<li>佐助</li>
<li>小樱</li>
</ul>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
document.getElementById("uu").style.backgroundColor = "pink";
}
</script>
需求：阻止a链接跳转
<!-- 方案1 -->
<a href="http://www.baidu.com" onclick="alert('被点击了')" return false>百度</a>
<!-- 方案2 -->
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
var ak = document.getElementById("ak");
ak.onclick = function(){
alert("我被点击了");
return false;
}
</script>
需求：点击小图变大图
<a href="01.jpg" id="ak"><img src="01-small.jpg" alt=""></a>
<img src="" alt="" id="big">
<script>
var ak = document.getElementById("ak");
ak.onclick = function(){
// 先获取到big的src再把自身ak的图片地址赋值给big
document.getElementById("big").src = this.href;
return false;
}
</script>
封装一个获取id的函数publick.js
function my$(id){
return document.getElementById(id);
}
需求：点击隔行换色
<body>
<input type="button" value="隔行换色" id="btn">
<ul id="uu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="publick.js"></script> //调用外部封装函数
<script>
//实现奇红偶黄
my$("btn").onclick = function(){
// 获取到所有的li标签
var list = my$("uu").getElementsByTagName("li");
// 循环遍历
for(var i = 0; i < list.length; i++){
// 判断
if(i % 2 == 0){ //数组下标从0开始
list[i].style.backgroundColor = "red";
}else{
list[i].style.backgroundColor = "yellow";
}
}
}
</script>
</body>
需求：列表隔行换色
<style>
ul{
list-style: none;
cursor: pointer; /*小手样式 */
}
</style>
<body>
<ul id="uu">
<li>雪花</li>
<li>乌苏</li>
<li>青岛</li>
<li>百威</li>
<li>乐堡</li>
</ul>
<script>
//获取到所有的li标签
var list = document.getElementsByTagName("li"); //伪数组
//循环
for(var i = 0; i < list.length; i++){
//鼠标经过 onmouseover
list[i].onmouseover = function(){
this.style.backgroundColor = "pink";
}
//鼠标离开 onmouseout
list[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
</script>
</body>
通过name名称来获取元素
<body>
<input type="button" value="显示效果" id="btn"><br />
<input type="text" value="通过name获取元素" name="name1"><br />
<input type="text" value="通过name获取元素" name="name2"><br />
<input type="text" value="通过name获取元素" name="name3"><br />
<input type="text" value="通过name获取元素" name="name4"><br />
<input type="text" value="通过name获取元素" name="name1"><br />
<input type="text" value="通过name获取元素" name="name1"><br />
<input type="text" value="通过name获取元素" name="name1"><br />
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
// 通过name属性值获取元素--集合
var inputs = document.getElementsByName("name1");
// 循环遍历
for(var i = 0; i < inputs.length; i++){
inputs[i].value = "我们又学会一种获取元素的方式"
}
}
</script>
通过类样式的名字来获取元素
<style>
div{
width: 300px;
height: 50px;
background: pink;
margin-top: 10px;
}
.cls{
background: skyblue;
}
</style>
<body>
<input type="button" value="显示效果" id="btn">
<p class="cls">这是第一个p标签</p>
<p>这是第二个p标签</p>
<span class="cls">这是第一个span</span><br />
<span >这是第二个span</span><br />
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>
<script src="publick.js"></script>
<script>
// 需求：点击按钮设置背景颜色
// getElementsByClassName()----H5
my$("btn").onclick = function(){
// 根据类样式的名字获取元素---通过class来获取元素
var objs = document.getElementsByClassName("cls");//(这个cls前面没有点) 是一个集合
// 循环遍历
for(var i = 0; i < objs.length; i++){
objs[i].style.backgroundColor = "#096";
}
}
</script>
</body>
通过其他方式(选择器)来获取元素
<style>
.cls{
background: pink;
}
</style>
<body>
<input type="button" value="显示效果" id="btn">
<p class="cls">这是第一个p标签</p>
<p>这是第二个p标签</p>
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>
<script>
var objs = document.querySelectorAll(".cls");//集合，是一个伪数组
// 遍历循环
for(var i = 0; i < objs.length; i++){
objs[i].style.backgroundColor = "#096";
}
</script>
</body>
总结：获取元素方式
1.根据id获取元素
document.getElementById("id的属性值")
2.根据标签获取元素
document.getElementsByTagName("标签的名字")
3.根据name的属性值获取元素
document.getElementsByName("name属性值")
4.根据类样式的名字获取元素
document.getElementsByClassName("类样式名字")
5.根据选择器获取元素
document.querySelector("选择器")选择一个元素
document.querySelectorAll("选择器")返回的是集合
6.专门获取body标签
document.body
7.专门获取html标签
document.documentElement
8.设置元素样式方式
对象.style.属性 = 值
对象.className = 值
