Obtenha estilo inline
function getStyle(obj,attr){
//获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){
//针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
}
}
Formas compatíveis de obter objetos de evento
document.onclick=function(eve){
var e=eve || window.event;
console.log(e);
}
Métodos compatíveis para borbulhamento de eventos
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;//兼容ie
}
}
Métodos compatíveis para evitar o comportamento padrão do navegador
if( e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;//ie
}
Formas compatíveis de definir e remover eventos de monitoramento
// 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;
}
}
O valor-chave do evento de teclado
// ie浏览器使用window.event.which
var eve = eve || window.event;
var keyC = eve.keyCode || eve.which;
Formato de hora
Use AAAA / MM / DD HH: mm: ss
o máximo possível porque o navegador Safari só oferece suporte ao formato AAAA / MM / DD HH: mm: ss e não oferece suporte a AAAA-MM-DD HH: mm: ss
"2016-06-10 12:00:00".split('-').join('/')
Obtenha a altura da barra de rolagem
function onscroll(){
const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
return scrollTop
}
O problema com innerText
Descrição do problema: innerText funciona normalmente no IE, mas innerText não funciona no FireFox.
Solução: use textContent em vez de innerText em navegadores não-IE.
function setInnerText(dom,text) {
if(navigator.appName.indexOf("Explorer") >-1){
dom.innerText = text;
} else{
dom.textContent = text;
}
}
Tente não usar setAttribute ()
Usar setAttribute para definir os atributos de estilo e onclick não funciona no IE. Para obter o efeito de compatibilidade com vários navegadores, você pode usar o método de notação de ponto para definir as propriedades do objeto, propriedades da coleção e propriedades do evento do Elemento.
const dom = document.getElementById('element');
dom.style.color = "#00f";
Defina o nome da classe
function AddClass(vName) {
element.setAttribute("class", vName);
element.setAttribute("className", vName); //for IE
}
problema de atributo input.type
No navegador IE, input.type é um atributo somente leitura e não pode ser modificado. Se você quiser modificá-lo, remova finalmente o elemento de entrada original e adicione um novo elemento de entrada
Problema de atribuição de largura e altura do objeto
Descrição do problema: A instrução semelhante a obj.style.height = imgObj.height no FireFox é inválida.
Solução: use obj.style.height = imgObj.height + 'px';
Obter dom por id
Descrição do problema: no IE, você pode usar eval ("idName") ou getElementById ("idName") para obter o objeto HTML cujo id é idName; no Firefox, você só pode usar getElementById ("idName") para obter o objeto HTML cujo id é idName.
Solução: Use getElementById ("idName") para obter o objeto HTML cujo id é idName.
Problemas de Event.x e event.y
Descrição do problema: No IE, o objeto par tem os atributos xey, mas não tem os atributos pageX e pageY; no Firefox, o objeto par tem os atributos pageX e pageY, mas não tem os atributos x e y.
var myX = event.x ? event.x : event.pageX;
var myY = event.y ? event.y : event.pageY;
Obter elemento pai dom
No IE, use obj.parentElement ou obj.parentNode para acessar o nó pai de obj; no firefox, use obj.parentNode para acessar o nó pai de obj.
const children = document.getElementsByClassName('children')[0];
const parent = children.parentNode
Acesse e defina os dados na área de transferência
Para acessar os dados da área de transferência, você pode usar o objeto clipboardData: no IE, este objeto é uma propriedade do objeto janela; no Firefox, Chrome e Safar, este objeto é uma propriedade do objeto de evento.
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");
};