JS设置标签的内容和样式

HTML5学堂

发布于 2018-03-13 11:15:11

20.3K0

发布于 2018-03-13 11:15:11

上一期堡堡给大家分享了操作符与数据类型转换。掌握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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2016-05-12，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自懂点君微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度