HTML&JS

宋乐
宋乐 2017年08月04日

监听浏览器 history back

function pushHistory() {
            var state = {
                title: "pay",
                url: "#pay"
            }
            window.history.pushState(state, "pay", "#pay");
        }
        pushHistory()

        window.addEventListener("popstate", function () {
            history.go(-2)
        }, false)

clientWidth , offsetHeight 等属性详解 参考

获取元素最终 CSS 属性值

  • window.getComputedStyle("元素", "伪类");
    可以获取当前元素所有最终使用的 CSS 属性值。

示例:

let end_style = window.getComputedStyle(document.getElementByID('test'))
alert(end_style.marginTop)

通过 targetObj 寻找 className 为 xxx 的 EleObj

let find_ParentTarByClassName = (target, className) => {
            try {
                while (true) {
                    if (!!target.classList && target.classList.contains(className)) {
                        break;
                    } else {
                        target = target.parentNode;
                    }
                }
                return target;

            } catch (error) {

            }
        }

鼠标滚轮横向滚动

            let ScrollEle = document.querySelector('.scroll-task-main')

            function MouseWheel(e) {
                e = e || window.event;
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true;
                }

                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }

                if (e.wheelDelta > 0) {
                    ScrollEle.scrollLeft -= 60
                } else {
                    ScrollEle.scrollLeft += 60
                }

            }
            ScrollEle.onmousewheel = MouseWheel

textarea 自动增高并隐藏滚动条

<textarea id="tValue" style="overflow-y:hidden; height:20px;" onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>

父容器 draggabel 为 true, 子节点不管是否都能移动

scrollIntoView

textarea 高度自适应 参考 1 参考 2

input、textarea、div(contenteditable=true)光标定位到最后 参考 1

触发点击事件

var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById('container-add-task').dispatchEvent(e);
//Angularjs
angular.element(document.getElementById('detailTask').children[0].children[0]).triggerHandler('click');

手机端点击其他组件调起 select

将 select 透明,然后通过定位将组件放到 select 位置

判断多个或者单个图片是否加载完成

在 Google 浏览器图片加载以后就不会调起 onload 方法, 所以需要通过 complete 去判断

let btnPromises = []
        btnPromises.push(new Promise((res, rej) => {
            let ele = document.getElementById('down-ios-img')
            if (!ele.complete) {
                ele.onload = () => {
                    res()
                }
            } else {
                res()
            }

        }))
        btnPromises.push(new Promise((res, rej) => {
            let ele = document.getElementById('down-andriod-img')
            if (!ele.complete) {
                ele.onload = () => {
                    res()
                }
            } else {
                res()
            }
        }))
        Promise.all(btnPromises).then(() => {
            let ele = document.getElementById('btn-animate')
            ele.velocity({ left: '0px', opacity: 1 }, { duration: 1000 });
        })

微信支付浏览器 url 传参只能传一个

使用 encodeURIComponent 包装一层, 使用 encodeURI 只会对中文转码,& 和 / 不会转码

encodeURI 和 encodeURIComponent 的区别在于前者被设计来用于对完整 URL 进行 URL Encode,于是 URL 中的功能字符,比如 &, ?, /, = 等等这些并不会被转义;而后者被设计来对一个 URL 中的值进行转义,会把这些功能字符也进行转义。

flex 弹性盒子布局中,关于 flex-grow 布局问题设置

参考

评论已关闭