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>

输出结果:

代码分析:

  1. 将getElementById()方法拆开来理解,get意思是获取,element是标签,by是通过,id是标签的id名,结合起来的意思是通过id名获取标签,另外JS的标识符命名推荐中,使用的是小驼峰命名法,所以结合起来就是getElementById();
  2. 网页是一个document对象,通过对象.方法的形式来调用getElementById()方法获取标签,如:document.getElementById('intro');
  3. 获取到的标签其实也是对象,可以通过对象.方法或对象.属性的形式来操作标签;具体如何操作标签,接着看下面的内容。

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>

运行效果:

代码分析:

  1. 代码desEle.style.backgroundColor中,因为style对象的属性只能接受小驼峰命名,所以需要把background-color——>backgroundColor;
  2. 利用style对象给标签设置样式,CSS样式是出现在标签内里面;
  1. 代码introEle.className = 'intro-ele';中,intro-ele是我们预先定义好的类名选择器(在例子中,我们在头部定义好了类名选择器)。
  2. 利用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>

结构变化:

代码分析:

  1. 获取到的标签是对象,通过对象.属性的形式来调用innerHTML属性,实现修改或获取标签的内容;
  2. 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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-05-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

ES6的Promise

相信凡是写过javascript的童鞋也一定都写过回调方法(callback),简单说回调方法就是将一个方法func2作为参数传入另一个方法func1中,当fu...

2533
来自专栏DeveWork

自定义WordPress 标签云小工具相关参数

相信你知道WordPress 标签云widget(小工具)是什么,如果你的WordPress 主题支持小工具,就可以在后台启用标签云小工具,该小工具不仅能展示标...

1908
来自专栏Golang语言社区

Golang语言goto语句

在Go编程语言中的goto语句提供无条件跳转从跳转到标记声明的功能。 注意:使用goto语句是高度劝阻的在任何编程语言,因为它使得难以跟踪程序的控制流程,使程序...

3479
来自专栏小狼的世界

jQuery的animate函数

jQuery提供了一个animate函数,可以通过改变CSS属性来实现一些动画效果。

713
来自专栏Django中文社区

基类View

在 Class-based views 源码解析 #1 中我们从宏观层面讨论了 Django 类视图的类继承结构以及命名规律。接下来我们要深入各个具体的类视图,...

2735
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 12 独立作用域

前面通过视频学习了解了指令的概念,这里学习一下指令中的作用域的相关内容。 通过独立作用域的不同绑定,可以实现更具适应性的自定义标签。借由不同的绑定规则绑定属...

1878
来自专栏Coco的专栏

【深入浅出jQuery】源码浅析--整体架构

1043
来自专栏前端知识分享

第125天:移动端-空白字符问题解决办法

    当我们想通过inline-block让两个div来并排,一个战父盒子的80%,一个占20%。可能看起来刚好100%,但是会由于代码中左右两个盒子之间的空...

683
来自专栏数据小魔方

动态图表7|组合框(index函数)

今天跟大家分享动态图表7——组合框(index函数)! 组合框制作图表,其步骤与列表框相同,唯一的不同点在于,组合框控件,提供用于选择的下拉菜单,在未选择的情况...

3034
来自专栏超然的博客

HTML5 data-* 自定义属性

  在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用dat...

922

扫码关注云+社区