一、css样式的不同浏览器兼容
浏览器 | 前缀 |
chrome | -webkit |
safari | -webkit |
firefox | -moz |
IE | -ms |
opera | -o |
/*代码示例*/
.front {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-ms-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
}
二、js常见各种场景问题的不同浏览器兼容
1.获取事件对象的兼容方式
document.onclick=function(eve){
var e=eve || window.event;
console.log(e);
}
2.事件冒泡的兼容方法
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;//兼容ie
}
}
3.阻止浏览器默认行为的兼容方法
if( e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;//ie
}
4.监听事件的设置和移除的兼容方式
// obj为dom对象 inci为事件名称 比如click back为回调函数
// attachEvent 是老版本浏览器使用的添加事件的方法,现在统一使用addEventListener
function addEvent(obj,inci,back){
if(obj.addEventListener){
obj.addEventListener(inci,back);
}else if(obj.attachEvent){
obj.attachEvent("on" + inci,back);
}else{
obj["on"+inci] = back;
}
}
// obj为dom对象 inci为事件名称 比如click back为回调函数
function removeEvent(obj,inci,back){
if(obj.removeEventListener){
obj.removeEventListener(inci,back,false);
}else if(obj.detachEvent){
obj.detachEvent("on" + inci,back);
}else{
obj["on"+inci] = null;
}
}
5.键盘事件的key值
// ie浏览器使用window.event.which
var eve = eve || window.event;
var keyC = eve.keyCode || eve.which;
6.时间格式
尽可能采用 YYYY/MM/DD HH:mm:ss
因为safari浏览器只支持YYYY/MM/DD HH:mm:ss这种格式,不支持YYYY-MM-DD HH:mm:ss
"2016-06-10 12:00:00".split('-').join('/')
7.获取滚动条高度
function onscroll(){
const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
return scrollTop
}
8.innerText的问题
问题说明:innerText在IE中能正常工作,但是innerText在FireFox中却不行。
解决方法:在非IE浏览器中使用textContent代替innerText。
function setInnerText(dom,text) {
if(navigator.appName.indexOf("Explorer") >-1){
dom.innerText = text;
} else{
dom.textContent = text;
}
}
9.尽量不使用setAttribute()
用setAttribute设置style和onclick这些属性,在IE中是行不通的。为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。
const dom = document.getElementById('element');
dom.style.color = "#00f";
10.设置类名
function AddClass(vName) {
element.setAttribute("class", vName);
element.setAttribute("className", vName); //for IE
}
11.event.x与event.y问题
问题说明:IE下,even对象有x、y属性,但是没有pageX、pageY属性;Firefox下,even对象有pageX、pageY属性,但是没有x、y属性。
var myX = event.x ? event.x : event.pageX;
var myY = event.y ? event.y : event.pageY;
12.获取dom父元素
在IE下,使用 obj.parentElement 或 obj.parentNode 访问obj的父结点;在firefox下,使用 obj.parentNode 访问obj的父结点。
const children = document.getElementsByClassName('children')[0];
const parent = children.parentNode
13.访问、设置剪切板中的数据
要访问剪切板中的数据,可以使用clipboardData对象:IE中,这个对象是window对象的属性;而在Firefox,Chrome,Safar中,这个对象是event对象的属性。
const setClipboardText = function (event, value) {
if (event.clipboardData) {
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData) {
return window.clipboardData.setData("text", value);
}
};
const getClipboardText = function (event) {
const clipboardData = event.clipboardData || window.clipboardData;
return clipboardData.getData("text");
};