<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JS中兼容代码总结</title>
<style>
body {
height: 100vh;
}
ul {
height: 100vh;
}
li {
list-style: none;
float: left;
}
li {
width: 50px !important;
height: 25px;
line-height: 25px;
margin-left: 20px;
background-color: pink;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content"></div>
<ul class="ul" id="ul">
<li class="li1" style="color: #fff; width: 60px;">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
<li class="li4">4</li>
<li class="li5">5</li>
</ul>
<script>
// ==================================================================================================
var div = document.querySelector(".content");
// 1.设置标签中的文本内容，可以使用textContent属性和innerText属性。
// textContent属性：谷歌、火狐支持，IE8不支持；
// innerText属性：谷歌、火狐、IE8都支持；
/**
* 设置元素的文本内容
* @param element 任意元素
* @param text 任意文本内容
*/
function setInnerText(element, text) {
if (typeof element.textContent == "undefined") {
element.innerText = text;
} else {
element.textContent = text;
}
}
setInnerText(div, "Hello World");
/**
* 获取元素的文本内容
* @param element 任意元素
* @returns {*} 任意元素中的文本内容
*/
function getInnerText(element) {
if (typeof element.textContent == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}
console.log(getInnerText(div)); // => Hello World
// ==================================================================================================
var ul = document.querySelector(".ul");
// 2.元素的获取某些方法在IE8中不支持
// element.firstChild ---> 谷歌和火狐获取的是第一个子节点
// element.firstChild ---> IE8获取的是第一个子元素
// element.firstElementChild ---> 谷歌和火狐是第一个子元素，IE8不支持
/**
* 获取父级元素中的第一个子元素
* @param element 父级元素
* @returns {*} 父级元素中的子级元素
*/
function getFirstElementChild(element) {
if (element.firstElementChild) {
// true--->支持
return element.firstElementChild;
} else {
var node = element.firstChild; // 第一个节点
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
console.log(getFirstElementChild(ul)); // => <li>1</li>
/**
* 获取父级元素中的最后一个子元素
* @param element 父级元素
* @returns {*} 父级元素中的子级元素
*/
function getLastElementChild(element) {
if (element.lastElementChild) {
// true--->支持
return element.lastElementChild;
} else {
var node = element.lastChild; // 第一个节点
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
}
console.log(getLastElementChild(ul)); // => <li>5</li>
// element.previousSibling---> 谷歌和火狐获取的是前一个兄弟节点，IE8获取的是前一个兄弟元素
// element.nextSibling---> 谷歌和火狐获取的是后一个兄弟节点，IE8获取的是后一个兄弟元素
// element.previousElementSibling---> 谷歌和火狐获取的是前一个兄弟元素，IE8不支持
// element.nextElementSibling---> 谷歌和火狐获取的是后一个兄弟元素，IE8不支持
/**
* 获取某个元素的前一个兄弟元素
* @param element 某个元素
* @returns {*} 前一个兄弟元素
*/
var li3 = document.querySelector(".li3");
function getPreviousElementSibling(element) {
if (element.previousElementSibling) {
return element.previousElementSibling;
} else {
var node = element.previousSibling; // 上一个兄弟节点
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
}
console.log(getPreviousElementSibling(li3)); // => <li class="li2">2</li>
/**
* 获取某个元素的后一个兄弟元素
* @param element 某个元素
* @returns {*} 后一个兄弟元素
*/
function getNextElementSibling(element) {
if (element.nextElementSibling) {
return element.nextElementSibling;
} else {
var node = element.nextSibling; // 下一个兄弟节点
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
console.log(getNextElementSibling(li3)); // => <li class="li4">4</li>
// ==================================================================================================
var li1 = document.querySelector(".li1");
var func = () => {
console.log("你好, 世界!");
};
// 3.为元素绑定事件
// 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
// 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
// 为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element, type, fn) {
//判断浏览器是否支持这个方法
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, fn);
} else {
element["on" + type] = fn;
}
}
addEventListener(li1, "click", func);
// ==================================================================================================
// 4.为元素解绑事件
// 解绑事件的兼容
// 为任意的一个元素,解绑对应的事件
function removeEventListener(element, type, fnName) {
if (element.removeEventListener) {
element.removeEventListener(type, fnName, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, fnName);
} else {
element["on" + type] = null;
}
}
removeEventListener(li1, "click", func);
// ==================================================================================================
// 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题
// 我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:
// 我们一般通过这两个方法获取行外样式：
// IE下: currentStyle
// Chrome,FF下: getComputedStyle(oDiv,false)
// 兼容两个浏览器的写法:
var oDiv = document.querySelector(".li1");
if (window.getComputedStyle) {
console.log(window.getComputedStyle(oDiv, false).width); // => 60px 遵循CSS三大特性
} else {
console.log(oDiv.currentStyle.width);
}
// *注:在解决很多兼容性写法时,都是用if..else..
// 封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)
function getStyle(element, name) {
if (window.getComputedStyle) {
// Chrom,FF
return window.getComputedStyle(element, false)[name];
} else {
// IE
return element.currentStyle[name];
}
}
console.log(getStyle(oDiv, "width")); // => 60px 遵循CSS三大特性
// ==================================================================================================
// 2.关于用“索引”获取字符串每一项出现的兼容性问题:
// 对于字符串也有类似于 数组 这样的通过 下标索引 获取每一项的值,
var str = "abcde";
console.log(str[1]); // => b
// 但是低版本的浏览器IE6,7不兼容
// 兼容方法:str.charAt(i) // 全部浏览器都兼容
var str = "abcde";
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i)); //放回字符串中的每一项
}
// ==================================================================================================
// 3.关于DOM中 childNodes 获取子节点出现的兼容性问题
// childNodes:获取子节点,
// --IE6-8:获取的是元素节点,正常
// --高版本浏览器:但是会包含元素节点、属性节点、文本节点(不正常)
// 解决方法: 使用nodeType:节点的类型，并作出判断
// --nodeType=3-->文本节点
// --nodeType=2-->属性节点
// --nodeTyPE=1-->元素节点
// 例: 获取ul里所有的子节点，让所有的子节点背景色变成红色
// 获取元素子节点兼容的方法:
var oUl = document.getElementById("ul");
for (var i = 0; i < oUl.childNodes.length; i++) {
if (oUl.childNodes[i].nodeType == 1) {
oUl.childNodes[i].style.background = "red";
}
}
// 注：上面childNodes为我们带来的困扰完全可以有children属性来代替。
// children属性:只获取元素节点,不获取属性节点和文本节点,兼容所有的浏览器，
// 比上面的好用所以我们一般获取子节点时,最好用children属性。
// var oUl = document.getElementById("ul");
// oUl.children.style.background = "red";
// ==================================================================================================
// 7.关于获取滚动条距离而出现的问题
// 当我们获取滚动条滚动距离时:
// IE,Chrome: document.body.scrollTop
// FF: document.documentElement.scrollTop
// 兼容处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
// js监听滚动条到底部
window.onscroll = function() {
// 变量scrollTop是滚动条滚动时，距离顶部的距离
var scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
// 变量windowHeight是可视区的高度
var windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
// 变量scrollHeight是滚动条的总高度
var scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
// 滚动条到底部的条件
if (scrollTop + windowHeight == scrollHeight) {
// 到了这个就可以进行业务逻辑加载后台数据了
console.log("到了底部");
// window.onscroll = '' 用于解除绑定
}
};
// ==================================================================================================
// 事件委托
ul.onclick = function(event) {
// 获取事件触动的时候传递过来的元素
event = event || window.event;
var target = event.target ? event.target : event.srcElement; // IE下是srcElement,标准下是target
// 判断标签名，如果是li标签弹窗
if (target.tagName === "LI") {
console.log(getInnerText(target));
}
};
</script>
</body>
</html>
05-18
1万+
1万+
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
