解决js设置css第一次点击不生效问题

解决js设置css第一次点击不生效问题


DATE: 2018-02-24 13:35:29

原问题链接:https://segmentfault.com/q/1010000007607750?_ea=1398991
本文解决方法参考自 hhxx 的答案

问题说明:
原生JS设置CSS隐藏属性,但开发者模式(清除CSS缓存)下每次刷新页面,第一次点击都不会生效。

解决方法:
增加获取当前CSS属性的函数。

function getStyle(dom, attr) {
    if (dom.currentStyle) {
        return dom.currentStyle[attr]
    } else {
        return getComputedStyle(dom)[attr]
    }
}

完整代码如下:

$btn = "<button id='commentbtn' onclick='disCom()'>".$txt."</button>";
$func = "<script>
function getStyle(dom, attr) {
    if (dom.currentStyle) {
        return dom.currentStyle[attr]
    } else {
        return getComputedStyle(dom)[attr]
    }
}
var btn = document.getElementById('commentdiv');
function disCom() {            
    (getStyle(btn, 'display')=='block') ? (btn.style.display = 'none') : (btn.style.display = 'block');
}</script>";

至此,问题解决,原理据hhxx讲,是因为JS获取不到通过CSS定义的CSS属性。

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!