JS兼用IE8的通过class名获取CSS对象组
转自:Garon_InE
原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中不能使用,所以写了一个兼容IE的方法。
完整的页面代码如下:
testJsGetCssClass.html
<html>
<head>
<style type="text/css">
.test_class_div {
font-size: 14px;
border: 1px solid #ccc;
margin: 10px;
padding: 5px;
font-weight: bold;
color: red;
}
</style> <script>
/**
*打印js对象详细信息
*/
function alertObj(obj)
{
var description = "";
for ( var i in obj)
{
var property = obj[i];
description += i + " = " + property + "\n";
}
alert(description);
} /**
*通过class名和标签名获取css样式对象组
*/
function getClassNames(classStr, tagName)
{
if (document.getElementsByClassName)
{
return document.getElementsByClassName(classStr)
} else
{
//为了兼容ie8及其以下版本的方法
var nodes = document.getElementsByTagName(tagName), ret = [];
for (i = 0; i < nodes.length; i++)
{
if (hasClass(nodes[i], classStr))
{
ret.push(nodes[i])
}
}
return ret;
}
} /**
*判断节点class存在性
*/
function hasClass(tagStr, classStr)
{
//这个正则表达式是因为class可以有多个,判断是否包含
var arr = tagStr.className.split(/\s+/);
for ( var i = 0; i < arr.length; i++)
{
if (arr[i] == classStr)
{
return true;
}
}
return false;
}
</script>
</head>
<body>
<div class="test_class_div">11111111</div>
<div class="test_class_div">22222222</div>
<div class="test_class_div">33333333</div>
<script>
//由于加载顺序,获取对象的代码应写在对象已加载之后
var divs = getClassNames('test_class_div', 'div');
if (null != divs)
{
alertObj(divs);
//遍历对象,改其css样式
for ( var i = 0; i < divs.length; i++)
{
divs[i].style.color = "blue";
}
}
</script>
</body>
</html>
运行结果:
初始字体颜色为红色,通过对象组修改后为蓝色。
firefox:
ie8:
JS兼用IE8的通过class名获取CSS对象组的更多相关文章
- Raphael.js image 在ie8以下的兼容性问题
Raphael.js 在ie7,ie8浏览器内绘制图形採用的vml,在绘制image的时候会解析成 <?xml:namespace prefix = "rvml" ns = ...
- js兼用性
1.document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName&q ...
- JSFinder:一个在js文件中提取URL和子域名的脚本
JSFinder介绍 JSFinder是一款用作快速在网站的js文件中提取URL,子域名的脚本工具. 支持用法 简单爬取 深度爬取 批量指定URL/指定JS 其他参数 以往我们子域名多数使用爆破或DN ...
- js 获取属性名称,再根据这个属性名获取值
if (result.success) { var obj = JSON.parse(result.data); var sltObj = document.getElementById(" ...
- 【总结整理】js获取css的属性(内部,外部,内嵌(写在tag中))
在JS中需要获取某个元素的宽高或者是绝对定位的位置信息,通常我们会这么写: var elemWidth = elem.style.width; console.log(elemWidth); //(空 ...
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...
- 3.jquery在js文件中获取选择器对象
一.常用的选择器有一下几种: 1.标签选择器 2.类选择器 3.id选择器 4.并集选择器 5.层级选择器 二.如何获取选择器对象: <!DOCTYPE html> <html la ...
- 为什么我获取不到这个css样式?js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
随机推荐
- msf连接PostgreSQL数据库
一.启动PostgreSQL服务######################################################################?root@root:~# ...
- Python语言、编译解释、动态库静态库、编译过程、头文件
学习Python这门语言首先要了解 什么是编译与解释,什么是连接,什么是动态库与静态库, 什么是编译: 编译就是先把高级语言设计的程序翻译成二进制的机器语言,然后CPU直接执行机器码就可以了.一把翻译 ...
- C#是类型安全语言
C#是一种类型安全语言:所有的表达式都解析成某个类型的一个实例,在编译器生成的代码中,只会执行对这个类型来说有效的操作. [优势] 许多错误能在编译时就检测到,确保代码在执行这段代码前是正确的: 生成 ...
- Report Server运行后一直处于加载状态
描述:对Report server做了一个小练习,算是入门,但发现运行起来后,页面一直处于加载状态,不知为何? 解决:查了一下网上的资料,解决的方法是 protected void Page_Load ...
- hdu2068 RPG的错排
RPG的错排 时间限制:1000/1000 MS(Java / Others)内存限制:32768/32768 K(Java / Others)总提交内容:16421接受的提交内容:6670 问题描述 ...
- java web关于文件上传下载的总结
文件上传使用<form method="POST" enctype="multipart/form-data"> , 而不是默认的applica ...
- vue(4)hello world
在前一章基础上开发. 1.下载vue.js.(https://cn.vuejs.org/v2/guide/installation.html) 在hello-vue根目录下创建js文件夹,并将该vue ...
- JavaWeb xss攻击
出处: http://www.cnblogs.com/TankXiao/archive/2012/03/21/2337194.html XSS 全称(Cross Site Scripting) 跨站脚 ...
- JAVA中的for循环
在Java程序中,要“逐一处理”――或者说,“遍历”――某一个数组或Collection中的元素的时候,一般会使用一个for循环来实现(当 然,用其它种类的循环也不是不可以,只是不知道是因为for这个 ...
- [转]使用Node.js完成的第一个项目的实践总结
本文转自:http://blog.csdn.net/yanghua_kobe/article/details/17199417 https://github.com/yanghua/FixedAsse ...