常见的pc端的兼容问题总结

王军发布于2019-08-22 17:32 / 1002人阅读

摘要：中常见的兼容问题元素划过的距离滚动距离在谷歌浏览器下在非谷歌浏览器下兼容写法获取非行内样式在下非下取消冒泡事件是取消冒泡事件是取消冒泡事件获取对象的方法获取方法通过获取元素在以及以下的浏览器中不可以使用手动创建键盘码的获取以及以下的浏览器

js中常见的兼容问题

1.元素划过的距离：滚动距离

document.body.scrollTop    //在谷歌浏览器下
document.documentElement.scrollTop        //在非谷歌浏览器下
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop        //兼容写法

2.js获取非行内样式

obj.currentStyle()        //在ie下
window.getComputedStyle(obj,null)       //非ie下

3.取消冒泡事件

//ev.cancelBubble是ie取消冒泡事件  ev.stopProgation是w3c取消冒泡事件
ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true

4.获取event对象的方法

var ev = event || ev

4.获取target方法

var target = ev.target || ev.srcElement

5.通过class获取元素

if (!document.getElementsByClassName) {        //在Ie8以及以下的浏览器中不可以使用
    document.getElementsByClassName = function () {        //手动创建
        var arr = [];
        var all = document.getElementsByTagName("*");
        for (var i = 0; i < all.length; i++) {
            if (all[i].className.indexOf(classname + "") != -1) {
                arr.push(all[i])
            }
        }
    }
    return arr;
}

6.键盘码的获取

ev.keyCode || ev.which        //ie8以及以下的浏览器不支持ev.keyCode

7.阻止浏览器的默认事件

e.preventDefault ? e.preventDefault() : e.returnValue = false

8.事件监听：

obj.addEventListener("click", function() {}, true)        //非ie浏览器
obj.attachEvent("onclick", function() {})        //    ie浏览器

css中常见的兼容问题

1.透明度问题

opacity:0-1        //标准浏览器
filter: alpha(opacity= 0-100)        //ie8以及以下私有

待续。。。

GPU云服务器云服务器 Js的兼容问题 java的常见问题关于云服务器的常见问题 ecs常见的问题都有哪些

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95261.html

常见的pc端的兼容问题总结

摘要：中常见的兼容问题元素划过的距离滚动距离在谷歌浏览器下在非谷歌浏览器下兼容写法获取非行内样式在下非下取消冒泡事件是取消冒泡事件是取消冒泡事件获取对象的方法获取方法通过获取元素在以及以下的浏览器中不可以使用手动创建键盘码的获取以及以下的浏览器 js中常见的兼容问题 1.元素划过的距离：滚动距离 document.body.scrollTop //在谷歌浏览器下 document.do...

awkj 2019-08-29 15:31 评论0 收藏0
webRTC实战总结

摘要：中微信内置浏览器还不支持我坚信不久的将来就会支持，但在中能够完美支持。因此本项目选择了微信公众号为切入点，通过检测引导用户在中打开页面。为了便于传输可将其处理成字符串，另一端接收时还原并用对应的构造函数构造对应的实例即可。前言前段时间一直在忙一个基于WebRTC的PC和移动端双向视频的项目。第一次接触webRTC，难免遇到了许多问题，比如：webRTC移动端兼容性检测，如何配置Me...

Pandaaa 2019-08-22 13:57 评论0 收藏0
我们来谈谈项目中遇到的需要兼容pc端和移动端的css布局

摘要：首先在里面需要引入移动端属性布局方式之布局标题布局标题布局内容兼容端和移动端的布局获取屏幕宽度设置标签的大小为移动端效果图端效果图布局方式之弹性布局布局标题布局内容兼容端和移动端的首先在head里面需要引入移动端属性： 1.css布局方式之div + css布局；标题: div + css布局内容: 兼容...

sshe 2019-08-02 15:23 评论0 收藏0
我们来谈谈项目中遇到的需要兼容pc端和移动端的css布局

摘要：首先在里面需要引入移动端属性布局方式之布局标题布局标题布局内容兼容端和移动端的布局获取屏幕宽度设置标签的大小为移动端效果图端效果图布局方式之弹性布局布局标题布局内容兼容端和移动端的首先在head里面需要引入移动端属性： 1.css布局方式之div + css布局；标题: div + css布局内容: 兼容...

miracledan 2019-08-30 11:16 评论0 收藏0