zoukankan      html  css  js  c++  java
  • 用 JS 原生方法实现 jQuery 的 append, prepend等常用方法

    相当于$(el).before('html')

    el.insertAdjacentHTML('beforeBegin', 'html');
    el.insertAdjacentHTML('beforebegin',element);
    

    相当于$(el).prepend('html')

    el.insertAdjacentHTML('afterBegin', 'html');
    el.insertBefore(element,el.firstChild);
    

    相当于$(el).append('html')

    el.insertAdjacentHTML('beforeEnd', 'html');
    el.appendChild(element)
    

    相当于$(el).after('html')

    el.insertAdjacentHTML('afterEnd', 'html');
    el.insertAdjacentElement('afterend',element)
    

    1、addClass:为指定的dom元素添加样式。

    $(el).addClass(className)//JQ
    el.classList.add(className)
     
    function addClass(obj, cls) {
        if (!this.hasClass(obj, cls)) {
            obj.className += " " + cls;
        }
    }
     
    
    

    2、removeClass:删除指定dom元素的样式。

    $(el).removeClass(className)//JQ
    el.classList.remove(className)
    function removeClass(obj, cls) {
        if (hasClass(obj, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            obj.className = obj.className.replace(reg, ' ');
        }
    }
     
    
    

    3、toggleClass:如果存在(不存在),就删除(添加)一个样式。

    $(el).toggleClass(className)//JQ
    el.classList.toggle(className)
    function toggleClass(obj,cls){
        if(hasClass(obj,cls)){
            removeClass(obj, cls);
        } else {
            addClass(obj, cls);
        }
    }
    

    4、hasClass:判断样式是否存在。

    function hasClass(obj, cls) {
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    

    $(el).offset()

    let rect=el.getBoundingClientRect()
    {
     top:rect.top+document.body.scrollTop,
     left:rect.left+document.body.scrollLeft
    }
    

    $(el).on(eventName,eventHandler)

    el.addEventListener(eventName,eventHandler)
    

    $(el).off(eventName,eventHandler)

    el.removeEventListener(eventName, eventHandler)
    

    $(el).remove()

    el.parentNode.removeChild(el)
    

    $(document).on(eventName, elementSelector, handler)

    document.addEventListener(eventName, function(e) {
        const handler = function(e) {
            console.log(this)
            console.log(e)
        }
        for (var target = e.target; target && target != this; target = target.parentNode) {
            if (target.matches(elementSelector)) {
                handler.call(target, e);
                break;
            }
        }
    }, false);
    

    1. 直接设置style的属性 注:某些情况用这个设置 !important值无效

    如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px';

    element.style.height = '100px';
    

    2. 直接设置属性(只能用于某些属性,相关样式会自动识别)

    element.setAttribute('height', 100);
    element.setAttribute('height', '100px');
    

    3. 设置style的属性

    element.setAttribute('style', 'height: 100px !important');
    

    4. 使用setProperty 如果要设置!important,推荐用这种方法设置第三个参数

    element.style.setProperty('height', '300px', 'important');
    

    5. 改变class 比如JQ的更改class相关方法

    因JS获取不到css的伪元素,所以可以通过改变伪元素父级的class来动态更改伪元素的样式

    element.className = 'blue';
    element.className += 'blue fb';
    

    6. 设置cssText

    element.style.cssText = 'height: 100px !important';
    element.style.cssText += 'height: 100px !important';
    

    7. 创建引入新的css样式文件

            function addNewStyle(newStyle) {
                var styleElement = document.getElementById('styles_js');
    
                if (!styleElement) {
                    styleElement = document.createElement('style');
                    styleElement.type = 'text/css';
                    styleElement.id = 'styles_js';
                    document.getElementsByTagName('head')[0].appendChild(styleElement);
                }
                
                styleElement.appendChild(document.createTextNode(newStyle));
            }
    
            addNewStyle('.box {height: 100px !important;}');
    

    8. 使用addRule、insertRule

            // 在原有样式操作
            document.styleSheets[0].addRule('.box', 'height: 100px');
            document.styleSheets[0].insertRule('.box {height: 100px}', 0);
    
            // 或者插入新样式时操作
            var styleEl = document.createElement('style'),
                styleSheet = styleEl.sheet;
    
            styleSheet.addRule('.box', 'height: 100px');
            styleSheet.insertRule('.box {height: 100px}', 0);
    
            document.head.appendChild(styleEl);   
    
  • 相关阅读:
    (Java) LeetCode 44. Wildcard Matching —— 通配符匹配
    (Java) LeetCode 30. Substring with Concatenation of All Words —— 与所有单词相关联的字串
    (Java) LeetCode 515. Find Largest Value in Each Tree Row —— 在每个树行中找最大值
    (Java) LeetCode 433. Minimum Genetic Mutation —— 最小基因变化
    (Java) LeetCode 413. Arithmetic Slices —— 等差数列划分
    (Java) LeetCode 289. Game of Life —— 生命游戏
    (Java) LeetCode 337. House Robber III —— 打家劫舍 III
    (Java) LeetCode 213. House Robber II —— 打家劫舍 II
    (Java) LeetCode 198. House Robber —— 打家劫舍
    (Java) LeetCode 152. Maximum Product Subarray —— 乘积最大子序列
  • 原文地址:https://www.cnblogs.com/7c89/p/15715624.html
Copyright © 2011-2022 走看看