Obtén estilo en línea
function getStyle(obj,attr){
//获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){
//针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
}
}
Formas compatibles de obtener objetos de eventos
document.onclick=function(eve){
var e=eve || window.event;
console.log(e);
}
Métodos compatibles para la propagación de eventos
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;//兼容ie
}
}
Métodos compatibles para evitar el comportamiento predeterminado del navegador
if( e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;//ie
}
Formas compatibles de configurar y eliminar eventos de monitoreo
// 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;
}
}
El valor clave del evento de teclado
// ie浏览器使用window.event.which
var eve = eve || window.event;
var keyC = eve.keyCode || eve.which;
Formato de tiempo
Utilice AAAA / MM / DD HH: mm: ss tanto como sea posible
porque el navegador Safari solo admite el formato AAAA / MM / DD HH: mm: ss y no admite AAAA-MM-DD HH: mm: ss
"2016-06-10 12:00:00".split('-').join('/')
Obtener la altura de la barra de desplazamiento
function onscroll(){
const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
return scrollTop
}
El problema con innerText
Descripción del problema: innerText funciona normalmente en IE, pero innerText no funciona en FireFox.
Solución: use textContent en lugar de innerText en navegadores que no sean IE.
function setInnerText(dom,text) {
if(navigator.appName.indexOf("Explorer") >-1){
dom.innerText = text;
} else{
dom.textContent = text;
}
}
Intenta no usar setAttribute ()
El uso de setAttribute para establecer los atributos de estilo y onclick no funciona en IE. Para lograr el efecto de ser compatible con varios navegadores, puede usar el método de notación de puntos para establecer las propiedades del objeto, las propiedades de la colección y las propiedades del evento del Elemento.
const dom = document.getElementById('element');
dom.style.color = "#00f";
Establecer el nombre de la clase
function AddClass(vName) {
element.setAttribute("class", vName);
element.setAttribute("className", vName); //for IE
}
problema de atributo input.type
En el navegador IE, input.type es un atributo de solo lectura y no se puede modificar. Si desea modificarlo, finalmente elimine el elemento de entrada original y agregue un nuevo elemento de entrada
Problema de asignación de ancho y alto de objeto
Descripción del problema: la declaración similar a obj.style.height = imgObj.height en FireFox no es válida.
Solución: use obj.style.height = imgObj.height + 'px';
Obtener dom por id
Descripción del problema: en IE, puede usar eval ("idName") o getElementById ("idName") para obtener el objeto HTML cuya identificación es idName; en Firefox, solo puede usar getElementById ("idName") para obtener el objeto HTML cuyo id es idName.
Solución: use getElementById ("idName") para obtener el objeto HTML cuyo id es idName.
Problemas de event.xy event.y
Descripción del problema: en IE, el objeto par tiene atributos xey, pero no tiene atributos pageX y pageY; en Firefox, el objeto par tiene atributos pageX y pageY, pero no tiene atributos xey.
var myX = event.x ? event.x : event.pageX;
var myY = event.y ? event.y : event.pageY;
Obtener el elemento padre dom
En IE, use obj.parentElement u obj.parentNode para acceder al nodo principal de obj; en firefox, use obj.parentNode para acceder al nodo principal de obj.
const children = document.getElementsByClassName('children')[0];
const parent = children.parentNode
Acceda y configure los datos en el portapapeles
Para acceder a los datos en el portapapeles, puede usar el objeto clipboardData: en IE, este objeto es una propiedad del objeto de ventana; en Firefox, Chrome y Safar, este objeto es una propiedad del 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");
};