未分类

js中装置成分class的三种方法小结,各浏览器对link标签onload

17 9月 , 2019  

1,onload事件

一、el.setAttribute(‘class’,’abc’);

一、el.setAttribute(‘class’,’abc’);

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<威尼斯人线上娱乐 ,!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=”utf-8″ />
<title>Link Element onload</title>
<link type=”text/css” rel=”stylesheet”
href=””
onload=”alert(this)”/>
</HEAD>
<BODY>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=”utf-8″ />
<title>setAttribute(‘class’, ‘abc’)</title>
<style type=”text/css”>
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id=”d1″>test div</div>
<script>
var div = document.getElementById(‘d1’);
div.setAttribute(“class”, “abc”);
</script>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=”utf-8″ />
<title>setAttribute(‘class’, ‘abc’)</title>
<style type=”text/css”>
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id=”d1″>test div</div>
js中装置成分class的三种方法小结,各浏览器对link标签onload。<script>
var div = document.getElementById(‘d1’);
div.setAttribute(“class”, “abc”);
</script>
</BODY>
</HTML>

IE6/7 :

IE6/7 : div背景观不是新民主主义革命
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景象为樱草黄
结果:IE6/7不辅助setAttribute(‘class’,xxx)方式设置成分的class。
二、el.setAttribute(‘className’, ‘abc’)

IE6/7 : div背景观不是新民主主义革命
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景观为革命
结果:IE6/7不帮助setAttribute(‘class’,xxx)格局设置成分的class。
二、el.setAttribute(‘className’, ‘abc’)

威尼斯人线上娱乐 1

复制代码 代码如下:

复制代码 代码如下:

IE8/9 :

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=”utf-8″ />
<title>setAttribute(‘className’, ‘abc’)</title>
<style type=”text/css”>
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id=”d1″>test div</div>
<script>
var div = document.getElementById(‘d1’);
div.setAttribute(“className”, “abc”);
</script>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=”utf-8″ />
<title>setAttribute(‘className’, ‘abc’)</title>
<style type=”text/css”>
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id=”d1″>test div</div>
<script>
var div = document.getElementById(‘d1’);
div.setAttribute(“className”, “abc”);
</script>
</BODY>
</HTML>

威尼斯人线上娱乐 2

IE6/7 : div背景观为革命
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景观不是乙未革命
结果:IE8/9/10/Firefox/Safari/Chrome/Opera不帮忙setAttribute(‘className’,xxx)格局设置成分的class。
很有意思,使用setAttribute的时候第三个参数为class和className的情形在IE6/7和IE8/9/10/Firefox/Safari/Chrome/Opera刚好相反。
三、el.className = ‘abc’;

IE6/7 : div背景象为革命
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景象不是革命
结果:IE8/9/10/Firefox/Safari/Chrome/Opera不协助setAttribute(‘className’,xxx)格局设置成分的class。
很有趣,使用setAttribute的时候第二个参数为class和className的处境在IE6/7和IE8/9/10/Firefox/Safari/Chrome/Opera刚好相反。
三、el.className = ‘abc’;

Opera :

复制代码 代码如下:

复制代码 代码如下:

威尼斯人线上娱乐 3

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=”utf-8″ />
<title>el.className = ‘abc'</title>
<style type=”text/css”>
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id=”d1″>test div</div>
<script>
var div = document.getElementById(‘d1’);
div.className = ‘abc’;
</script>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=”utf-8″ />
<title>el.className = ‘abc'</title>
<style type=”text/css”>
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id=”d1″>test div</div>
<script>
var div = document.getElementById(‘d1’);
div.className = ‘abc’;
</script>
</BODY>
</HTML>

即IE6/7/8/9/Opera都支持onload事件, Firefox/Safari/Chrome不支持。

具备浏览器都援助。

富有浏览器都辅助。

注:用JS成立link标签再增添到head中,意况如上。
2,onreadystatechange事件

‘); 复制代码
代码如下: !DOCTYPE HTML HTML HEAD meta charset=”utf-8″ /
titlesetAttribute(‘class’, ‘abc’)/title style type=”text/css” .abc
{…

您或然感兴趣的文章:

  • javascript删除成分节点removeChild()用法实例
  • js使用removeChild方法动态删除div元素
  • js数组循环遍历数组内全体因素的艺术
  • js删除数组成分、清空数组的轻易方法(非看不可)
  • JavaScript从数组中去除钦赐值成分的点子
  • 向JavaScript的数组中添韩元素的法门小结
  • JS获取节点的哥们,父级,子级成分的艺术
  • JavaScript判定数组是不是饱含钦命成分的方法
  • js获取数组的末梢七个因素
  • 原生JavaScript达成remove()和recover()作用示例

复制代码 代码如下:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=”utf-8″ />
<title>Link Element onreadystatechange</title>
<link type=”text/css” rel=”stylesheet”
href=””
onreadystatechange=”alert(this)”/>
</HEAD>
<BODY>
</BODY>
</HTML>

IE6/7/8/9中弹出了三遍,其余浏览器均未有弹。表达独有IE扶助link成分的onreadystatechange事件。弹出五次分别是readyState为loading,complete状态。可应用readyState来决断载入情状。大家再使用JS动态创立link成分试试,

复制代码 代码如下:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=”utf-8″ />
<title>Link Element onreadystatechange</title>
</HEAD>
<BODY>
<script>
function createEl(type, attrs){
var el = document.createElement(type),
attr;
for(attr in attrs){
if(attrs.hasOwnProperty(attr)){
el.setAttribute(attr, attrs[attr]);
}
}
return el;
}
var link = createEl(‘link’, {
href :
”,
rel : ‘stylesheet’,
type : ‘text/css’
});
link.onreadystatechange = function(){
alert(this)
}
document.getElementsByTagName(‘head’)[0].appendChild(link);
</script>
</BODY>
</HTML>

IE6/7/8/9中照旧弹出了2次。Firefox/Safari/Chrome还是没弹。貌似一切符合规律,但奇妙的是此次在Opera中弹出了贰遍,表明Opera协理动态创造link成分时的onreadystatechange事件。

相关:

您也许感兴趣的稿子:

  • 仅IE9/10同有时间帮忙script成分的onload和onreadystatechange事件剖析
  • firefox下对ajax的onreadystatechange的支撑意况分析
  • document.onreadystatechange事件的用法分析


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图