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 条评论
登录 后参与评论

相关文章

来自专栏flutter开发者

Flutter动画【2】

在上次的文章中我们学习了Tween动画的用法,我们也一块看了下AnimatedBuilder和AnimatedWidget的用法,通过Tween动画结合相应的W...

5834
来自专栏smy

css控制标题长度超出部分显示省略号

width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或...

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

(递归版)合并排序

递归版的合并排序,时间复杂度为O(nlogn),空间复杂度为O(n+logn); 算法思想: 利用分而自治的思想,把排序分成两块,每块内部排序,再进行一次遍历...

20010
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb04-jQuery(Java真正的全栈开发)

? jQuery 一.jQuery入门 1.javascript类库 JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客...

3579
来自专栏flutter开发者

自定义View案例【LabelView】

在前面的几篇文章中我们介绍了Flutter中自定义view的用法,学习了canvas中常用的绘制方法,在这篇及以后的几篇文章中我会给大家写几个自定义View的例...

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

【web必知必会】—— 使用DOM完成属性填充

  本文介绍了使用DOM的简单方法实现动态加载图片的功能。 前文介绍了: 1 DOM四个常用的方法   首先看一下效果,初始时是一个相册,可以点击...

1779
来自专栏前端知识分享

第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。

1563
来自专栏向治洪

android之View绘制

Android系统的视图结构的设计也采用了组合模式,即View作为所有图形的基类,Viewgroup对View继承扩展为视图容器类,由此就得到了视图部分的基本...

1579
来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

3899
来自专栏有趣的django

21.jQuery

简介 jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情...

3329

扫码关注云+社区