Obtenez un style en ligne
function getStyle(obj,attr){
//获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){
//针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
}
}
Méthodes compatibles pour obtenir des objets d'événement
document.onclick=function(eve){
var e=eve || window.event;
console.log(e);
}
Méthodes compatibles pour le bullage d'événements
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;//兼容ie
}
}
Méthodes compatibles pour empêcher le comportement par défaut du navigateur
if( e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;//ie
}
Méthodes compatibles pour définir et supprimer des événements de surveillance
// 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;
}
}
La valeur clé de l'événement clavier
// ie浏览器使用window.event.which
var eve = eve || window.event;
var keyC = eve.keyCode || eve.which;
Format de l'heure
Utilisez AAAA / MM / JJ HH: mm: ss autant que possible
car le navigateur Safari ne prend en charge que le format AAAA / MM / JJ HH: mm: ss et ne prend pas en charge AAAA-MM-JJ HH: mm: ss
"2016-06-10 12:00:00".split('-').join('/')
Obtenez la hauteur de la barre de défilement
function onscroll(){
const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
return scrollTop
}
Le problème avec innerText
Description du problème: innerText fonctionne normalement dans IE, mais innerText ne fonctionne pas dans FireFox.
Solution: utilisez textContent au lieu de innerText dans les navigateurs non IE.
function setInnerText(dom,text) {
if(navigator.appName.indexOf("Explorer") >-1){
dom.innerText = text;
} else{
dom.textContent = text;
}
}
Essayez de ne pas utiliser setAttribute ()
L'utilisation de setAttribute pour définir les attributs de style et onclick ne fonctionne pas dans IE. Afin d'obtenir l'effet d'être compatible avec divers navigateurs, vous pouvez utiliser la méthode de notation par points pour définir les propriétés d'objet, les propriétés de collection et les propriétés d'événement de l'élément.
const dom = document.getElementById('element');
dom.style.color = "#00f";
Définissez le nom de la classe
function AddClass(vName) {
element.setAttribute("class", vName);
element.setAttribute("className", vName); //for IE
}
Problème d'attribut input.type
Dans le navigateur IE, input.type est un attribut en lecture seule et ne peut pas être modifié. Si vous souhaitez le modifier, supprimez enfin l'élément d'entrée d'origine et ajoutez un nouvel élément d'entrée.
Problème d'affectation de la largeur et de la hauteur de l'objet
Description du problème: l'instruction similaire à obj.style.height = imgObj.height dans FireFox n'est pas valide.
Solution: utilisez obj.style.height = imgObj.height + 'px';
Obtenez dom par identifiant
Description du problème: dans IE, vous pouvez utiliser eval ("idName") ou getElementById ("idName") pour obtenir l'objet HTML dont l'id est idName; dans Firefox, vous ne pouvez utiliser que getElementById ("idName") pour obtenir l'objet HTML dont l'id est idName.
Solution: utilisez getElementById ("idName") pour obtenir l'objet HTML dont l'id est idName.
Problèmes Event.x et event.y
Description du problème: sous IE, l'objet pair a des attributs x et y, mais n'a pas d'attributs pageX et pageY; sous Firefox, l'objet pair a des attributs pageX et pageY, mais n'a pas d'attributs x et y.
var myX = event.x ? event.x : event.pageX;
var myY = event.y ? event.y : event.pageY;
Obtenir l'élément parent dom
Sous IE, utilisez obj.parentElement ou obj.parentNode pour accéder au nœud parent de obj; sous Firefox, utilisez obj.parentNode pour accéder au nœud parent de obj.
const children = document.getElementsByClassName('children')[0];
const parent = children.parentNode
Accéder et définir les données dans le presse-papiers
Pour accéder aux données du presse-papiers, vous pouvez utiliser l'objet clipboardData: dans IE, cet objet est une propriété de l'objet window; dans Firefox, Chrome et Safar, cet objet est une propriété de l'objet événement.
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");
};