用 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);