详析设置样式的方法

上一期文章当中,小编与大家详细的总结了获取标签的方法,能够便于大家灵活的去获取网页中的标签。如果想具体了解详析获取标签,可以回复“获取标签”到“HTML5学堂”公众号。今天小编要与大家总结设置样式的方法,它能让大家更好的去操作标签的样式。

本文内容概要:

1 使用className属性设置标签的样式

2 使用style对象设置标签的样式

3 使用cssText属性设置标签的样式

4 课程小结

5 课后作业

1 使用className属性设置标签的样式

在项目开发中,通常是使用类名选择器来控制标签的样式。那我们完全可以通过JS给标签动态的添加类名,以达到动态改变标签的样式。具体的操作看下面的实例。

实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <style type="text/css">
        .wrap {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="wrapEle">HTML5学堂 - 陈能堡</div>
    <script type="text/javascript">
        var wrapObj = document.getElementById('wrapEle');


        // 给标签添加类名
        wrapObj.className = 'wrap';
    </script>
</body>
</html>

结构上的变化:

结果:

代码分析:

  1. 使用id名获取网页的标签,然后再使用className属性给标签添加类名wrap;
  2. 因为class是JS的保留字,不符合命名规范,所以类名属性是className而不是class;

到目前为止相信大家已经掌握了使用className属性给标签添加类名。在网页中有着各种各样的页面交互效果,难免会遇到给标签添加类名的需求,那我们能不能封装一个添加类名的功能函数,来提升代码的复用性。

在标签原有的类名基础上添加类名:

<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');

    // 给标签添加类名
    wrapObj.className += ' main';
</script>

结果:

代码分析:

  1. 类名是一个字符串,只需要使用字符串的连接就能够实现这个功能;通过className属性获取已经存在的类名,然后通过 += 操作符连接新的类名;
  2. 添加类名main的时候,为了防止变成这样'wrapmain',在类名main前面添加了空格' main',以达到'wrap main'这种效果;

提取参数,封装成功能函数:

<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    /*
     * [addClass 添加类名功能函数]
     * @param {[对象]} eleObj   [标签对象]
     * @param {[字符串]} newClass [添加的类名]
     */
    function addClass(eleObj, newClass) {
        wrapObj.className += ' ' + newClass;
    }


    // 添加多个类名
    addClass(wrapObj, 'main');
    addClass(wrapObj, 'con');
</script>

结果:

代码分析:

定义一个功能函数,函数名称为addClass,需要为某个元素增加某个类名,因此这里采用两个参数,作为这个函数的接口;

2 使用style对象设置标签的样式

设置标签的样式,除了通过选择器之外,我们还可以通过标签内联的方式来给标签设置样式。那我们可以通过JS动态的给标签添加内联样式,具体的操作看下面的案例。

实例:

<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    wrapObj.style.width = '200px';
    wrapObj.style.height = '200px';
    wrapObj.style.backgroundColor = 'pink';
    wrapObj.style.lineHeight = '200px';
    wrapObj.style.textAlign = 'center';
</script>

结果:

注意:元素.style.属性中,“属性”只能接受把CSS属性(由一个以上单词组成,用“-”中划线连接的CSS属性)转成小驼峰命名的形式,如:font-size——>fontSize; 例如:eleObj.style.fontSize = '30px';

在上面的实例当中,可以清楚的看到出现了比较多的重复性代码,比如wrapObj.style,那我们能否把它封装成一个功能函数,来减少重复性的代码。

实例:

<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    /*
     * [setStyle 设置标签的样式]
     * @param {[对象]} eleObj [标签对象]
     * @param {[对象]} cssObj [CSS属性]
     * @author 陈能堡
     */
    function setStyle(eleObj, cssObj) {
        for (var property in cssObj) {
            eleObj.style[property] = cssObj[property];
        };
    }


    // 调用
    setStyle(wrapObj, {
        width: '200px',
        height: '200px',
        backgroundColor: '#886699',
        lineHeight: '200px',
        textAlign: 'center' 
    });
</script>

代码分析:

  1. 代码19~23行中先把CSS属性名转换成小驼峰(也可以通过正则、字符串来处理),然后把它当做对象的属性和属性值,最后对象当做函数的实参传入到函数里面;
  2. 代码12~14行利用for in语句循环遍历对象的属性和属性值;代码eleObj.style[property] = cssObj[property];其中property的值是对象的属性名,cssObj[property]是对象的属性值;eleObj.style['width'] = '200px'等价于eleObj.style.width = '200px';

3 使用cssText属性设置标签的样式

当我们需要给标签设置大量的样式时,虽然使用style对象完全可以实现标签样式的设置,但是对于页面的性能来说会产生一定的影响(重绘与回流),为了避免该问题,我们使用了style对象的cssText属性来进行处理。

实例:

<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    wrapObj.style.cssText = 'width: 200px;height: 200px; background-color:pink;line-height: 200px;text-align:center;';
</script>

结构的变化:

结果:

那我们还是老样子把它封装成一个功能函数

<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    /*
     * [setStyle 设置标签的样式]
     * @param {[对象]} eleObj [标签对象]
     * @param {[对象]} cssObj [CSS属性]
     * @author 陈能堡
     */
    function setStyle(eleObj, cssObj) {
        var cssStr = '';


        for (var property in cssObj) {
            // 利用字符串拼接把多个CSS属性和属性值连接起来,例如:width:200px;height:200px;background-color:#886699;
            cssStr += property + ':' + cssObj[property] + ';';
        };


        // 拼接好的字符串赋值给cssText属性
        eleObj.style.cssText = cssStr;
    }


    // 调用
    setStyle(wrapObj, {
        'width': '200px',
        'height': '200px',
        'background-color': '#886699',
        'line-height': '200px',
        'text-align': 'center' 
    });
</script>

4 课程小结

1 通过className属性设置标签的样式,目的在于能够更好的实现结构、样式、行为的相分离;

2 使用style对象设置标签的样式,能够很好的辅助页面交互效果的实现;

3 使用cssText属性设置标签的样式,能够很好的去提升页面的性能;

5 课后作业

视频内容

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

原文发表时间:2016-06-09

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

css继承样式怎么控制?用选择器

  css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性。css继承原理是我们设置上级(父级)的CSS样...

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

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

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

1779
来自专栏liulun

riot.js教程【五】标签嵌套、命名元素、事件、标签条件

前文回顾 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs...

3178
来自专栏flutter开发者

自定义View案例【LabelView】

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

1632
来自专栏天天

动画

592
来自专栏编程思想之路

Android6.0源码分析之View(二)--measure Android6.0源码分析之View(一)

接着上一篇 Android6.0源码分析之View(一) 紧接着来学习view的measure,(注,开始写博客之后,很明显我的学习效率高多了,研究了俩星期硬是...

2609
来自专栏向治洪

android之View绘制

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

1579
来自专栏james大数据架构

Jquery基本用法总结

选择器 $("#mydiv") 通过ID $("p#myp") 选择id=myp 的所有p元素(组合型) $(".mydiv") 通过 class="mydi...

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

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

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

3579
来自专栏有趣的django

21.jQuery

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

3319

扫码关注云+社区