从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式
大家好，这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号，欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
1、对样式的操作
1.1、点击按钮设置 div 的宽高和背景颜色
<body>
<input type="button" value="显示颜色" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
my$("dv").style.width = "200px";
my$("dv").style.height = "100px";
my$("dv").style.backgroundColor = "pink";
};
</script>
</body>
凡是 css 属性时由多个单词构成的，那么在 js 中设置的时候需要把 "-" 去掉，然后除第一个单词的首字母大写即可。
比如：css里面的
background-color，在js里面的写法是backgroundColor.
1.2、点击按钮隐藏和显示 div 标签
<body>
<input type="button" value="hide" id="btn">
<div id="dv" style="width: 200px; height: 100px; background-color: pink;"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
if(this.value === "hide") {
my$("dv").style.display = "none";
this.value = "show";
}else if(this.value === "show") {
my$("dv").style.display = "block"; // block是显示标签
this.value = "hide";
}
};
</script>
</body>
1.3、网页开关灯
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls {
background-color: #000;
}
</style>
</head>
<body class="">
<input type="button" value="ON/OFF" id="btn">
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
document.body.className = document.body.className !== "cls" ? "cls" : "";
};
</script>
</body>
document.body 可以选中 body 标签。
1.4、阻止超链接默认跳转
<body>
<!--方式一-->
<a href="http://www.baidu.com" onclick="alert('------'); return false;">百度</a>
<!--方式二-->
<a href="http://www.baidu.com" onclick="return f1()">百度</a>
<script>
function f1() {
alert("---------");
return false;
}
</script>
<!--方式三-->
<a href="http://www.baidu.com" id="ah">百度</a>
<script>
document.getElementById("ah").onclick = function () {
alert("------");
return false;
};
<!--方式四-->
<a href="http://www.baidu.com" id="ah">百度</a>
<script>
document.getElementById("ah").onclick = function (e) {
alert("------");
e.preventDefault();
};
</script>
</body>
阻止超链接的跳转：返回给 onclick 事件一个
return false，而不单单是 false。方式二：当使用内联 js 的时候，onclick 里面是 f1() 而不是 f1。是函数的执行，而不是函数体本身。但是在外面写 js 的时候，赋值给 onclick 的是函数体本身，认不是函数的执行。
方式二中之所以加 return，是因为 f1() 执行后返回的是 false，而不是 return false，所以要加一个 return。
方式四：调用事件参数对象的 preventDefault() 方法：
e.preventDefault();可以阻止超链接跳转。注意 IE8 不支持。
1.5、点击小图在小图下显示大图
<a href="images/2.JPG" id="ah"><img src="images/Daotin.png"></a>
<img src="" id="im">
<script src="common.js"></script>
<script>
my$("ah").onclick = function () {
my$("im").src = this.href;
return false;
};
</script>
使用
return false;阻止链接原本的跳转。
1.6、列表高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ul>
<script src="common.js"></script>
<script>
var liObjs = document.getElementsByTagName("li");
for(var i=0; i<liObjs.length; i++) {
// 鼠标进入事件
liObjs[i].onmouseover = function () {
this.style.backgroundColor = "pink";
};
// 鼠标离开事件
liObjs[i].onmouseout = function () {
this.style.backgroundColor = ""; // 空表示恢复之前的颜色
};
}
</script>
</body>
</html>
1.7、通过 name 属性获取元素
<input type="button" value="按钮" id="btn"><br>
<input type="text" value="lvonve" name="nm1"><br>
<input type="text" value="lvonve" name="nm2"><br>
<input type="text" value="lvonve" name="nm1"><br>
<input type="text" value="lvonve" name="nm3"><br>
<input type="text" value="lvonve" name="nm1"><br>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
var inputs = document.getElementsByName("nm1");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "Daotin";
}
};
</script>
通过 name 属性获取元素适用于表单标签，基本标签没有 name 属性
基本标签：
div,p,h1,ul,li,br等表单标签：
input, select,option,form,textarea,datalist,label等
1.8、根据类样式的名字获取元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls {
background-color: yellow;
}
</style>
</head>
<body>
<p class="cls">第一个p标签</p>
<p>第二个p标签</p>
<span class="cls">第一个span</span><br>
<span>第二个span</span>
<div>第一个div</div>
<div class="cls">第二个div</div>
<input type="button" value="按钮" id="btn">
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
var objs = document.getElementsByClassName("cls");
for(var i=0; i<objs.length; i++) {
objs[i].style.backgroundColor = "red";
}
};
</script>
</body>
注意：getElementsByClassName 在IE8等低版本浏览器不支持。
2、获取元素的方式总结
1、根据 id 的属性的值获取元素，返回值是一个元素对象
document.getElementById("id属性的值");
2、根据标签名获取元素，返回值是包含多个元素对象的伪数组
document.getElementsByTagName("标签名字");
3、根据 name 属性的值获取元素，返回值是包含多个元素对象的伪数组
document.getElementsByName("name属性的值");
4、根据 class 类样式的名字获取元素，返回值是包含多个元素对象的伪数组
document.getElementsByClassName("class类样式的值");
5、根据 CSS 选择器获取元素，返回值是一个元素对象
document.querySelector("#id属性的值");
document.querySelector("标签的名字");
document.querySelector(".class类样式的值");
6、根据 CSS 选择器获取元素，返回值是包含多个元素对象的伪数组
document.querySelectorAll("#id属性的值");
document.querySelectorAll("标签的名字");
document.querySelectorAll(".class类样式的值");
注意区分是名字还是值。
3、案例：模拟搜索框
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input {
color: gray;
}
</style>
</head>
<body>
<input type="text" value="请输入搜索内容">
<script src="common.js"></script>
<script>
// 获取文本框对象
var inputObj = document.getElementsByTagName("input")[0];
// 为文本框注册获取焦点事件
inputObj.onfocus = function () {
if(this.value === "请输入搜索内容") {
this.value = "";
this.style.color = "#000";
}
};
// 为文本框注册失去焦点事件
inputObj.onblur = function () {
if(this.value.length === 0) {
this.value = "请输入搜索内容";
this.style.color = "gray";
}
};
</script>
</body>
文本框注册失去焦点事件的时候使用
this.value.length === 0，而不使用this.value === "请输入搜索内容"是因为数字的比较比字符串的比较效率更高。
从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式的更多相关文章
- 从零开始学 Web 之 DOM（一）DOM的概念，对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（五）元素的创建
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 DOM（七）事件冒泡
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 DOM（四）节点
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- selenium3 web自动化测试框架 二：页面基础操作、元素定位方法封装、页面操作方法封装
学习目的: 掌握自动化框架中需要的一些基础web操作 正式步骤: 使用title_contains检查页面是否正确 # -*- coding:utf-8 -*- import time from se ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- Python积累三:object() take no object!
A,报错:object() take no object! 根因:代码书写级错误!!!!! 两个原因: 1. __init__ 左右都是2个下划线,这里自己没掉进去! 2.init写成int,不是in ...
- Solidity的地址 数组如何判断是否包含一个给定的地址？
Q: given address[] wallets. What is the correct method to check that the list contains a given addre ...
- R 语言安装
在linux下,对于手动安装的软件,当时间长了,我们就会忘记安装这个软件的细节.这就不利于以后软件的卸载工作了.而yum则会帮我们记住相关安装细节,当软件被卸载的时候,没用的文件也会一并被删除.因此, ...
- HTML5表单_form
原则:能让用户选择的决不填写,增加用户体验 表单(form)元素格式 <input type="text" name="fname" value=&quo ...
- ASM的一些小坑
变量必需放到数据段,才有直接对地址赋值的访问权限 segment .data n1 dw 55h segment .text global _nasm_function _nasm_function: ...
- handoop安装部署集群
hdfs 1.0版本 一个namenode (secordary namenode 2.0冷备份) 和多个datanode构成分布式文件系统 mapreduce 一个 jobtracker 协调 ta ...
- 札记：Property动画
简介 Android 3.0 (API level 11)引入了属性动画系统,它是一个完善的框架,可以用来对几乎任何对象进行动画.只需要指定要动画的对象属性,动画时长,属性值区间等,无论对像是否在屏幕 ...
- blender 快捷键手动整理
armature envelop 设置骨骼影响范围:Edit Mode 下,选中骨头的其中一端,按 Alt + s,缩放 T 呼出 Tools N 呼出 Property Ctrl + Alt + Q ...
- js内存空间的那点事
由于js具有自动垃圾回收机制,导致接触js后一直没去关注js的内存分配及变量回收等原理,只是懵懂的了解用变量标记法(null)可以手动的去清除或是回收:是时候弥补这个大坑了... 垃圾回收两种方法 一 ...
- 音视频编解码——RGB与YUV格式转换
一．RGB模型与YUV模型 1.RGB模型 我们知道物理三基色分别是红(Red).绿(Green).蓝(Blue).现代的显示器技术就是通过组合不同强度的红绿蓝三原色,来达成几乎任何一种可见光的颜色. ...