前端Vue: ElementUI 源码分析之dom.js样式操作的封装

栏目: JavaScript · 发布时间: 5年前

内容简介:使用 classList 是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法element.classsList /className 实练有助于理解哦
elementUI 中对dom样式的操作,使用了Web API接口中对element 对象的
1.classList属性/className属性/contains等属性;
复制代码

科普:

Element.classList 是一个只读属性,返回一个元素的类属性的实时DOMTokenList 集合。
复制代码

使用 classList 是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法

方法:

add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。

remove( String [,String] )
删除指定的类值。

item ( Number )
按集合中的索引返回类值。

toggle ( String [, force] )
当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。
当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它

contains( String )
检查元素的类属性中是否存在指定的类值。

replace( oldClass, newClass )
用一个新类替换已有类。   
复制代码

hasClass()

/**

  判断element标签对象是否包含某一个类;
*/

     
    /* istanbul ignore next */
export function hasClass(el, cls) {
  if (!el || !cls) return false;
  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
  if (el.classList) {
    return el.classList.contains(cls);
  } else {
    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }
};
复制代码

addClass()

/* istanbul ignore next 
     向一个element 标签对象中添加一个类
    */
export function addClass(el, cls) {
      if (!el) return;
      var curClass = el.className;
      var classes = (cls || '').split(' ');

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {
      el.classList.add(clsName);
    } else if (!hasClass(el, clsName)) {
      curClass += ' ' + clsName;
    }
  }
  if (!el.classList) {
    el.className = curClass;
  }
};
复制代码

removeClass()

/**
     移除一个element 标签对象的class ;
    */
    /* istanbul ignore next */
export function removeClass(el, cls) {
  if (!el || !cls) return;
  var classes = cls.split(' ');
  var curClass = ' ' + el.className + ' ';

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {
      el.classList.remove(clsName);
    } else if (hasClass(el, clsName)) {
      curClass = curClass.replace(' ' + clsName + ' ', ' ');
    }
  }
  if (!el.classList) {
    el.className = trim(curClass);
  }
};
复制代码

element.classsList /className 实练有助于理解哦

前端Vue: ElementUI 源码分析之dom.js样式操作的封装
chrome console:

var dom =document.getElementById("datatable")

dom.classList

DOMTokenList(3) ["barhide-x", "p-scrollbar", "bar-y", value: "barhide-x p-scrollbar bar-y"]0: "barhide-x"1: "p-scrollbar"2: "bar-y"length: 3value: "barhide-x p-scrollbar bar-y"]
__proto__: DOMTokenList

dom.className
"barhide-x p-scrollbar bar-y"

dom.classList.remove("bar-y");

dom.classList

DOMTokenList(2) ["barhide-x", "p-scrollbar", value: "barhide-x p-scrollbar"]0: "barhide-x"1: "p-scrollbar"length: 2value: "barhide-x p-scrollbar"__proto__: DOMTokenList

dom.classList.remove("p-scrollbar");

dom.classList.remove("barhide-x");

dom.classList

DOMTokenList [value: ""]length: 0value: ""__proto__: DOMTokenList

dom.className
""
复制代码

参考


以上所述就是小编给大家介绍的《前端Vue: ElementUI 源码分析之dom.js样式操作的封装》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

互联网+ 战略版

互联网+ 战略版

刘润 / 中国华侨出版社 / 2015-5-1 / 49.8

1、“互联网+”上升为国家战略,“互联网+”成为下一个超级畅销书的热点话题在商业环境巨变的今天,传统企业该怎么走?传统企业转型是一个系统工程,如何定战略、抓主要矛盾? 2、首本“互联网+传统企业”的战略指导书。“我互联网+”时代到来了,传统企业的外部环境发生了哪些变化?了解商业新生代的新商业环境,跟之前工业时代的不同,从战略上指导传统企业转型,更安全也更大局把握游刃有余。一起来看看 《互联网+ 战略版》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具