JavaScript之ClassName属性学习

     在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你就不得不花时间去研究JavaScript函数,去寻找对应修改和设置样式的有关语句。而且每添加或修改js脚本的代码量远大于我们修改css样式的代码量。

所以与其使用DOM直接改变莫个元素的样式,不如通过JavaScript代码去更新这个元素的class属性。

下面通过代码来比较这两种方式的差别:

function setStyleHeaderSiblings() {
    if (!checkCompatibility()) return; //check compatibility
    var heads = document.getElementsByTagName("h1");
    var ele;  //defines a element for receive;
    for (var i = 0; i < heads.length; i++) {
        ele = getNextElement(heads[i].nextSibling);
        ele.style.fontWeight = "bold";
        ele.style.fontSize = "1.2em";
    }
}
function setStyleHeaderSiblings() {
    if (!checkCompatibility()) return; //check compatibility
    var heads = document.getElementsByTagName("h1");
    var ele;  //defines a element for receive;
    for (var i = 0; i < heads.length; i++) {
        ele = getNextElement(heads[i].nextSibling);
        ele.className="change";
    }

假设我们这个需要给这个效果加上一个background-color:blue;

上面这种做法需要在js里面加如下代码:

ele.style.backgroundColor="blue";

而第二种做法则只要在样式表里加一个样式就可以实现,而且实现了样式与行为的分离,还减少了我们的代码量,所以在后期需求不确定的情况下,我建议第二种方法来动态的修改元素的样式。

但是通过className设置元素的样式也有一个缺陷,那就是通过className设置元素的class属性时将替换(而不是追加)该元素原有的class属性,在实际开发中往往很多时候我们需要追加class;

所以根据这个需要我们可以自定义一个方法来实现追加className的效果代码如下:

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " "; //这句代码追加的类名分开
        newClassName += value;
        element.className = newClassName;
    }
}

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

简单的鼠标可拖动DIV 兼容IE/FF

一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度,clientX/clientY位置等)

16210
来自专栏知道一点点

bootstrap快速入门笔记(六)-代码

一,内联代码<code>:For example, <code>&lt;section&gt;</code> should be wrapped as inli...

8720
来自专栏代码世界

jQuery

jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Docum...

53750
来自专栏葡萄城控件技术团队

CSS变量(自定义属性)实践指南

Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少...

11410
来自专栏九彩拼盘的叨叨叨

Vue1.x 写法示例

常见内置过滤器 capitalize, uppercase, lowercase, json, limitBy, filterBy。所有见这里。

9530
来自专栏keyWords

深入React技术栈之setState详解

8910
来自专栏柠檬先生

jquery 表单事件

.blur()    当元素失去焦点的时候触发事件。   .blur(handler(eventObject))     handler(even...

21090
来自专栏彭湖湾的编程世界

【Vue】详解Vue组件系统

Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组...

310110
来自专栏技术墨客

React学习(1)——JSX语法与React组件

    上面这段有趣的例子既不是标准的JavaScript也不是HTML,它就是我们接下来要介绍的JSX的语法,是一种JavaScript的扩展。在React中...

9350
来自专栏跟着阿笨一起玩NET

display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:

8910

扫码关注云+社区

领取腾讯云代金券