JS中兼容代码总结
<!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" >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(Content =="undefined"){
element.innerText = text;
}else{
}
}
setInnerText(div,"Hello World");
/**
* 获取元素的⽂本内容
* @param element 任意元素
* @returns {*} 任意元素中的⽂本内容
*/
function getInnerText(element){
if(Content =="undefined"){
return element.innerText;
}else{
Content;
}
}
console.log(getInnerText(div));// => Hello World
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 && deType !=1){
node = Sibling;
}
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 && deType !=1){
node = node.previousSibling;
}
return node;
}
}
console.log(getLastElementChild(ul));// => <li>5</li>
// element.previousSibling---> ⾕歌和⽕狐获取的是前⼀个兄弟节点，IE8获取的是前⼀个兄弟元素
// Sibling---> ⾕歌和⽕狐获取的是后⼀个兄弟节点，IE8获取的是后⼀个兄弟元素
// element.previousElementSibling---> ⾕歌和⽕狐获取的是前⼀个兄弟元素，IE8不⽀持
// ElementSibling---> ⾕歌和⽕狐获取的是后⼀个兄弟元素，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 && deType !=1){
node = node.previousSibling;
}
return node;
}
}
console.log(getPreviousElementSibling(li3));// => <li class="li2">2</li>
/**
* 获取某个元素的后⼀个兄弟元素
* @param element 某个元素
* @returns {*} 后⼀个兄弟元素
*/
function getNextElementSibling(element){
ElementSibling){
ElementSibling;
ElementSibling;
}else{
var node = Sibling;// 下⼀个兄弟节点
while(node && deType !=1){
node = Sibling;
}
return node;
}
}
console.log(getNextElementSibling(li3));// => <li class="li4">4</li>
/
/ ================================================================================================== var li1 = document.querySelector(".li1");
var func=()=>{
console.log("你好, 世界!");
};网站底部代码js特效
// 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){
veEventListener){
}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");
ComputedStyle){
console.ComputedStyle(oDiv,false).width);// => 60px 遵循CSS三⼤特性
}else{
console.log(oDiv.currentStyle.width);
}
// *注：在解决很多兼容性写法时，都是⽤if..else..
// 封装⼀个获取⾏外样式的函数:(兼容所有浏览器，包括低版本IE6,7)
function getStyle(element, name){
ComputedStyle){
// Chrom,FF
ComputedStyle(element,false)[name];
}else{
// IE
return element.currentStyle[name];
}
}
console.log(getStyle(oDiv,"width"));// => 60px 遵循CSS三⼤特性
// ================================================================================================== // 2.关于⽤“索引”获取字符串每⼀项出现的兼容性问题:
// 对于字符串也有类似于数组这样的通过下标索引获取每⼀项的值,
var str ="abcde";
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 = ElementById("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 = ElementById("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监听滚动条到底部
// 变量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("到了底部");
// scroll = '' ⽤于解除绑定
}
};
// ================================================================================================== // 事件委托
// 获取事件触动的时候传递过来的元素
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>
发表评论