JS设置标签的内容和样式
上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量,以便完成JS的各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生的问题,能够让我们更好的完成JS的各种功能。如果想具体了解操作符与数据类型转换,可以查看:操作符与数据类型转换。而今天我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式。
Tips:由于上一期的文章篇幅过长,微信的文章有字数要求,所以小编把部分的内容(操作符)放到这一期进行讲解。
继上一期的内容 - 操作符
赋值操作符:=(赋值) +=(加/赋值) -=(减/赋值) *=(乘/赋值) /=(除/赋值) %=(取余/赋值)
如果在赋值操作符(=)前面再添加上加、减、乘、除、取余的操作符就可以完成复合赋值操作,能更为简便的完成赋值和计算操作(复合赋值操作中间不能含有空格,例如:+ =是错误的书写,正确的书写是+=)。
例如:var a = 10; a += 5;是 a = a + 5;的简写,其意思是把变量a加上5得出的结果再重新赋值给a,其它操作符同理。
实例:
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解,请勿模仿
var a = 1;
var b = 2;
var c = 3;
var d = 4;
var e = 5;
// 利用复合赋值操作
a += 2; // 等价于a = a + 2;
b -= 2; // 等价于b = b - 2;
c *= 2; // 等价于c = c * 2;
d /= 2; // 等价于d = d / 2;
e %= 2; // 等价于e = e % 2;
// 输出
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
</script>
输出结果:3 0 6 2 1
一元操作符:--(递减) ++(递增)
只能操作一个值的操作符叫做一元操作符;递增和递减操作符是借鉴自C语言,而且各有两个版本:前置型和后置型;
前置型:操作符位于要操作的变量之前,例如:++a;表示的是a的值加1;
实例:
<script type="text/javascript">
var age = 20;
var result = ++age;
console.log(result);
</script>
输出结果:21
代码分析:先给age加1,再赋值给result,所以最终结果为21;
后置型:操作符位于要操作的变量之后;例如:a++;表示的是先执行再给a的值加1;
实例:
<script type="text/javascript">
var age = 20;
var result = age--;
console.log(result);
console.log(age);
</script>
输出结果:20 19
代码分析:age先赋值给result,age本身再减1,所以最终结果result为20,age为19;
到这边为止,JS基础算是告一段落了,希望大家能把JS基础打扎实,它直接影响着后期JS的学习。接下来,我们要给大家讲解的是逻辑与DOM的相结合了。
本文内容概要:
1 获取标签
2 设置样式
3 获取/设置标签的内容
4 课程小结
5 课后练习
1 获取标签
在讲解获取标签之前,我们需要来理解一个概念,什么是对象(Object)?举一个生活中的例子,咱们可以把“汽车”看作是对象,汽车它能在路上跑、有鸣笛等功能,汽车它具有型号、类型、颜色等属性。从这可以得出结论,对象是具有属性和功能。
在学CSS的时候,我们是如何选择到对应的标签进行样式的控制?利用了CSS选择器。那么JS如何在网页中找到相应的标签进行相关的操作?在HTML5当中,网页其实就是一个对象 —— document(文档)对象,该对象里面已经存在着获取标签的方法 - getElementById(),我们只需要负责调用该方法就能获取到相应的标签。那么问题来了,如何调用getElementById()方法?接着往下看吧。
上面提到了对象是具有属性和功能,那我们如何使用对象的属性或功能呢?具体可以通过对象.属性或对象.方法(功能就是方法)的形式来进行调用,如:document.getElementById('id名')。
代码实例:
<!-- 结构 -->
<div class="wrap">
<h2>HTML5学堂小编 - 堡堡</h2>
<p id="des">陈能堡 - 梦幻雪冰</p>
<p id="intro">HTML5学堂 - 原来技术可以通俗易懂</p>
</div>
<!-- JavaScript -->
<script type="text/javascript">
// 通过getElementById()方法获取标签
var desEle = document.getElementById('des');
var introEle = document.getElementById('intro');
// 输出获取到的结果
console.log(desEle);
console.log(introEle);
// 检测数据类型
console.log(typeof(desEle));
console.log(typeof(introEle));
</script>
输出结果:
代码分析:
- 将getElementById()方法拆开来理解,get意思是获取,element是标签,by是通过,id是标签的id名,结合起来的意思是通过id名获取标签,另外JS的标识符命名推荐中,使用的是小驼峰命名法,所以结合起来就是getElementById();
- 网页是一个document对象,通过对象.方法的形式来调用getElementById()方法获取标签,如:document.getElementById('intro');
- 获取到的标签其实也是对象,可以通过对象.方法或对象.属性的形式来操作标签;具体如何操作标签,接着看下面的内容。
2 设置样式
现在要对获取到的标签进行设置样式的操作,回顾之前学的HTML与CSS,给标签设置样式有几种方式?我们是不是使用CSS选择器、标签内联来控制标签的样式。那在JS中,它到底是如何控制标签的样式?
1 通过标签/元素.style.属性 = "属性值" 进行样式的控制
标签也是对象,可以使用对象.属性的形式来使用style对象;因为style也是对象,所以它也可以通过对象.属性来控制标签的样式。
注意:元素.style.属性中,“属性”只能接受把CSS属性(由一个以上单词组成,用“-”中划线连接的CSS属性)转成小驼峰命名的形式,如:font-size——>fontSize;
例如:eleObj.style.fontSize = '30px';
2 通过控制类名进行样式的控制
标签也是对象,使用标签的className属性给标签添加类名;
注意:因为class是JS的保留字,不符合命名规范,所以类名属性是className而不是class;
例如:eleObj.className = 'intro-ele';
代码实例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - HTML5学堂</title>
<link rel="stylesheet" href="reset.css">
<style>
.intro-ele {
background-color: skyblue;
font-size: 20px;
}
</style>
</head>
<body>
<!-- 结构 -->
<div class="wrap">
<h2>HTML5学堂小编 - 堡堡</h2>
<p id="des">刘国利 - 独行冰海</p>
<p id="intro">HTML5学堂 - 原来技术可以通俗易懂</p>
</div>
<!-- JavaScript -->
<script type="text/javascript">
// 通过getElementById()方法获取标签
var desEle = document.getElementById('des');
var introEle = document.getElementById('intro');
// 通过style对象控制标签样式
desEle.style.backgroundColor = 'pink';
// 通过className属性控制标签样式
introEle.className = 'intro-ele';
</script>
</body>
</html>
运行效果:
代码分析:
- 代码desEle.style.backgroundColor中,因为style对象的属性只能接受小驼峰命名,所以需要把background-color——>backgroundColor;
- 利用style对象给标签设置样式,CSS样式是出现在标签内里面;
- 代码introEle.className = 'intro-ele';中,intro-ele是我们预先定义好的类名选择器(在例子中,我们在头部定义好了类名选择器)。
- 利用className属性给标签设置样式,CSS样式没有出现在标签内,只是给标签添加类名而已;
3 获取/设置标签的内容
现在可以利用JS来控制标签的样式,能否利用JS控制标签的内容?当然可以,我们可以使用innerHTML属性实现修改或获取标签中的内容。把innerHTML属性拆开来理解,inner的意思是里面、内部的,HTML是开始和结束标签之间的 HTML,包括了标签和文本;合起来的意思是标签里面的内容(标签和文本);
例如:eleObj.innerHTML = 'HTML5学堂 - 堡堡';
代码实例:
<!-- 结构 -->
<div class="wrap">
<h2>HTML5学堂小编 - 堡堡</h2>
<p id="des">刘国利 - 独行冰海</p>
<p id="intro">HTML5学堂 - 原来技术可以通俗易懂</p>
</div>
<!-- JavaScript -->
<script type="text/javascript">
// 通过getElementById()方法获取标签
var desEle = document.getElementById('des');
var introEle = document.getElementById('intro');
// 通过innerHTML属性获取标签内容
console.log(desEle.innerHTML);
// 通过innerHTML属性设置标签内容
desEle.innerHTML = '陈能堡 - 梦幻雪冰';
// 输出修改后的标签内容
console.log(desEle.innerHTML);
// 利用innerHTML属性添加标签
introEle.innerHTML += '<span>这是我新添加的标签</span>';
// 输出修改后的标签内容
console.log(introEle.innerHTML);
</script>
输出结果:
刘国利 - 独行冰海
陈能堡 - 梦幻雪冰
HTML5学堂 - 原来技术可以通俗易懂<span>这是我新添加的标签</span>
结构变化:
代码分析:
- 获取到的标签是对象,通过对象.属性的形式来调用innerHTML属性,实现修改或获取标签的内容;
- innerHTML属性不仅仅可以添加文本内容,还可以添加HTML标签,如:introEle.innerHTML += '<span>这是我新添加的标签</span>';
4 课程小结
掌握获取标签的目的是能够利用JS选择到相应的标签,便于对其进行相应的操作;
掌握设置样式的目的是能够利用JS实现对标签样式的控制,为实现动态的交互效果打下一定的基础;
掌握操作标签的内容目的在于能够灵活的操作标签的内容,能够更好的辅助页面交互效果的实现。
5 课后练习
1 id名为h5Course的div标签 <div class="wrap" id="h5Course">HTML5学堂</div>,JS代码如下:
// 注意查看id的大小写
var con = document.getElementById("h5course");
alert(con.innerHTML);
在IE、谷歌浏览器下测试,哪几个浏览器会正常显示?从显示结果中可以得出什么结论?
2 有两个对象,var o = {num: 1};var p = {num: 2};要求书写一段代码,使得o + p===3为true。
3 利用下方提供的结构代码(注意,提供的结构不能变化,但是可以用JS添加),完成下方的最终效果;
结构代码:
<!-- 结构 -->
<div class="wrap" id="outer">
</div>
最终效果:
HTML5学堂 - 堡堡 耗时7h
- 【Go 语言 redis内存数据库存储 demo】
- linux下基本操作记录mongodb
- ClassLoader究竟为何物?
- Oracle应用实战八(完结)——存储过程、函数+对象曹组
- 动态代理模式原理
- SQL可以正常用,但cmd启动不了mysql,报错[ERROR] unknown variable ;basedir=....问题
- Percona-toolkit的安装和配置(r8笔记第86天)
- 分布式服务框架 Zookeeper
- python--类方法、对象方法、静态方法
- Go语言内存分配器的实现
- Go 语言 数据库操作之链接数据库实现
- 对于tnsping的连接超时的功能补充(r9笔记第3天)
- struts2拦截器源码分析
- Go语言学习(一):hello world
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微信小程序下拉刷新功能
- 详解Linux Screen让程序保持后台运行
- Python Des加密与解密实现软件注册码、机器码
- Excel VBA 在保留原单元格数据的情况下,将计算的百分比加在后面
- 入门级别的面试题——LeetCode题目19:删除链表的倒数第N个节点
- python做web接口测试零散笔记--1
- 要一遍做对——LeetCode题目20:有效的括号
- 双指针算法练习(一)
- 一般是面试的热身题——LeetCode题目21:合并两个有序链表
- LeetCode题目22:括号生成
- OpenGL ES 3.0 | 着色器编译器
- LeetCode题目23:合并K个排序链表
- LeetCode题目24:两两交换链表中的节点
- 最难链表题——LeetCode题目25:K 个一组翻转链表
- LeetCode题目26:删除排序数组中的重复项