<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div id="container" style="width: 480px height: 220pxborder:1px solid #e3e3e3" onclick="renderLink()">
<a href="#" class="mya">Test1</a>
<a href="#">Test2</a>
<a href="#" class="mya">Test3</a>
<a href="#" class="mya">Test4</a>
<a href="#" class="mya">Test5</a>
<a href="#">Test6</a>
</div>
</body>
</html>
<script type="text/javascript">
function renderLink(){
var alist = document.getElementsByClassName("mya")
if(alist){
for(var idx = 0 idx < alist.length idx ++){
var mya = alist[idx]
mya.style.color = "red"
mya.style.fontSize = "36px"
}
}
}
</script>
先用document.getElementsByClassName("className")取得所有class为className的元素，再循环添加样式即可，如果用JQuery会简单很多；也可以自己用JS封装一个函数实现JQuery一样的效果
项目中需要用到动态加载CSS 文件，整理了一下，顺便融合了动态加载JS 的功能写成了一个对象，先上代码：var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !')
}
var head = document.getElementsByTagName('head')[0]
var link = document.createElement('link')
link.href = path
link.rel = 'stylesheet'
link.type = 'text/css'
head.appendChild(link)
},
js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !')
}
var head = document.getElementsByTagName('head')[0]
var script = document.createElement('script')
script.src = path
script.type = 'text/javascript'
head.appendChild(script)
}
}
对象包含两个完全独立的方法，分别用来加载CSS 文件和JS 文件，参数均为欲加载的文件路径。原理非常的简单：对于不同的加载文件类型创建不同的节点，然后添加各自的属性，最后扔到head 标签里面。经测试，本方法兼容各浏览器，安全、无毒、环保，是 web 开发人员工作常备代码。
下面是调用代码，异常简单：
//动态加载 CSS 文件
dynamicLoading.css("test.css")
//动态加载 JS 文件
dynamicLoading.js("test.js")
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）