Rumah hujung hadapan web tutorial js Native js melaksanakan kemahiran addClass, removeClass, hasClass method_javascript

Native js melaksanakan kemahiran addClass, removeClass, hasClass method_javascript

May 16, 2016 pm 03:03 PM
addclass js

Artikel ini dibahagikan kepada dua bahagian untuk dijelaskan, kandungan khusus adalah seperti berikut

Bahagian 1: Js asli melaksanakan kaedah addClass, removeClass, hasClass

function hasClass(elem, cls) {
  cls = cls || '';
  if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false
  return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
}

function addClass(ele, cls) {
  if (!hasClass(elem, cls)) {
    ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
  }
}

function removeClass(ele, cls) {
  if (hasClass(elem, cls)) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';
    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
      newClass = newClass.replace(' ' + cls + ' ', ' ');
    }
    elem.className = newClass.replace(/^\s+|\s+$/g, '');
  }
}
Salin selepas log masuk

Bahagian 2: Gunakan JS asli untuk melaksanakan fungsi addClass, removeClass, hasClass jQuery

function addClass(obj, cls){
  var obj_class = obj.className,//获取 class 内容.
  blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
  added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.
  obj.className = added;//替换原来的 class.
}
 
function removeClass(obj, cls){
  var obj_class = ' '+obj.className+' ';//获取 class 内容, 并在首尾各加一个空格. ex) 'abc    bcd' -> ' abc    bcd '
  obj_class = obj_class.replace(/(\s+)/gi, ' '),//将多余的空字符替换成一个空格. ex) ' abc    bcd ' -> ' abc bcd '
  removed = obj_class.replace(' '+cls+' ', ' ');//在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
  removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd'
  obj.className = removed;//替换原来的 class.
}
 
function hasClass(obj, cls){
  var obj_class = obj.className,//获取 class 内容.
  obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组.
  x = 0;
  for(x in obj_class_lst) {
    if(obj_class_lst[x] == cls) {//循环数组, 判断是否包含cls
      return true;
    }
  }
  return false;
}

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta Nov 21, 2023 am 10:00 AM

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Dec 17, 2023 pm 06:55 PM

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Dec 18, 2023 pm 03:39 PM

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok

Cara membuat carta candlestick saham menggunakan PHP dan JS Cara membuat carta candlestick saham menggunakan PHP dan JS Dec 17, 2023 am 08:08 AM

Cara membuat carta candlestick saham menggunakan PHP dan JS

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta Nov 21, 2023 am 10:53 AM

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta

Cara menggunakan JS dan Baidu Map untuk melaksanakan fungsi pemprosesan acara klik peta Cara menggunakan JS dan Baidu Map untuk melaksanakan fungsi pemprosesan acara klik peta Nov 21, 2023 am 11:11 AM

Cara menggunakan JS dan Baidu Map untuk melaksanakan fungsi pemprosesan acara klik peta

Apakah yang dilakukan oleh pengendali baharu dalam js Apakah yang dilakukan oleh pengendali baharu dalam js Nov 13, 2023 pm 04:05 PM

Apakah yang dilakukan oleh pengendali baharu dalam js

See all articles