发布一个js判断样式className和增加class删除class的通用代码
2008-09-02 17:27
发布一个js判断样式className和增加class删除class的通用代码，部分代码参考prototype.js <HTML>
<HEAD>
<TITLE>testClassName</TITLE>
</HEAD>
<BODY>
<p> </p>
<div id="cc" class="cc eee ee"></div>
<script type="text/javascript">
function BrowserCompatible () {}
BrowserCompatible.hasClassName = function(element, className)
{
if (!element) return;
var elementClassName = element.className;
if (elementClassName.length == 0) return false;
//用正则表达式判断多个class之间是否存在真正的class（前后空格的处理）
if (elementClassName == className || elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
return true;
return false;
}
BrowserCompatible.addClassName = function(element, className)
{
if (!element) return;
var elementClassName = element.className;
if (elementClassName.length == 0)
{
element.className = elementClassName;
return;
}
if (elementClassName == className || elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
return;
element.className = elementClassName + " " + className;
}
BrowserCompatible.removeClassName = function(element, className)
{
if (!element) return;
var elementClassName = element.className;
if (elementClassName.length == 0) return;
if(elementClassName == className)
{
element.className = "";
return;
}
if (elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
element.className = elementClassName.replace((new RegExp("(^|\\s)" + className + "(\\s|$)"))," ");
}
function $(id)
{
return document.getElementById(id);
}
//alert(BrowserCompatible.hasClassName($("cc"), "cc"));
BrowserCompatible.addClassName($("cc"), "rr");
alert($("cc").className);
BrowserCompatible.removeClassName($("cc"), "ee");
alert($("cc").className);
</script>
</BODY>
</HTML>
|
原文链接：http://hi.baidu.com/jsdevelop/blog/item/0a67f517eee52f1e972b43ae.html/cmtid/572567a6fdcc9a9bd043586b
分享到：
相关推荐
纯JavaScript实现根据CSS的class选择DOM的技术原理涉及到DOM操作和类选择器的相关知识点。在这里，我们将深入探讨如何使用纯JavaScript，不依赖任何第三方库，来获取具有特定class属性的DOM元素。 首先，我们要了解...
- 为了保持代码的可读性和可维护性，应当避免过度使用JavaScript直接操作样式属性，合理的做法是将通用样式定义在CSS文件中，仅在必要时通过JavaScript动态调整。 通过以上的知识点介绍，可以看出JavaScript在动态...
【标题】中的“新浪大片首页jQuery焦点图代码”是指一种基于JavaScript库jQuery实现的网页焦点图效果，这种效果常见于新浪大片首页，用于展示电影、电视剧等多媒体内容的轮播，提升用户体验，增加视觉吸引力。...
【CSS规范化命名】是编程实践中为了提高代码可读性、可维护性和团队协作效率而采用的一系列命名约定。本文详细讲解了三种通用的CSS命名规则：骆驼式命名法、匈牙利命名法和帕斯卡命名法。 1. 骆驼式命名法（Camel ...
总结起来，React组件化通用模式是通过数据驱动和组件化思想来构建用户界面，强调代码的模块化和可复用性，同时提供了一套完整的方法来管理组件的生命周期、状态和样式，从而提高开发效率和应用性能。通过熟练掌握...
本文将深入探讨两者在JavaScript函数和方法、样式访问和设置、DOM操作、事件处理以及其他方面的兼容性处理，帮助开发者解决跨浏览器兼容性问题。 首先，让我们关注函数和方法的差异： 1. `getYear()` 方法：在IE中...
JavaScript实现的多个层切换效果通用函数的原理和应用 在现代网页设计中，层切换效果是常见的交云动态效果之一。它通过程序控制页面中不同层（或称为div）的显示与隐藏，使得用户可以更加直观地与页面内容互动。在...
总结，JavaScript 兼容性问题主要集中在函数和方法差异、样式访问和设置、事件处理、DOM 操作以及 BOM。解决这些问题通常需要通过条件判断或使用兼容性库如 jQuery，以确保代码在多种浏览器环境下能正常工作。理解并...
- **`classList`** 和 **`dataset`** - `classList`属性是一个只读属性，返回一个DOMTokenList对象，用于操作元素的类名。 - `dataset`属性是一个只读属性，返回一个DOMStringMap对象，用于访问元素的数据属性。 ...
- 兼容处理：使用通用的事件处理函数，如`addEvent()`和`removeEvent()`，内部判断浏览器类型并调用相应的原生方法。 **五、其他差异的兼容处理** - 包括数组方法、正则表达式、JSON支持等，都需要针对不同浏览器...
关于JavaScript（简称js）获取CSS样式以及设置CSS样式的知识点，可以从以下几个方面进行详细说明： 1. 原生JavaScript获取元素的内联样式： 在JavaScript中，我们可以使用element.style.propertyName的方式来获取一...
在本节课程“第34章 项目1-博客前端：封装库--CSS[下]1”中，我们将深入学习如何封装CSS操作，主要聚焦在添加和移除类（class）以及设置和移除CSS规则。课程由主讲教师李炎恢讲解，他同时也是北风网（ibeifeng.com）...
第一个是通用的列表项样式`li`，我们可以为其设置鼠标指针样式`cursor:pointer`，以便用户知道这些元素是可以点击的。第二个样式类`cur`用于表示选中状态，我们将为其设置一个背景颜色，例如红色。以下是相关的CSS...
例如，`el.setAttribute('class', 'abc')`在标准浏览器中会为元素添加类名"abc"，但在IE6和IE7中，这个样式可能不会生效，尽管使用`el.getAttribute('class')`确实能够获取到"abc"这个值。这意味着，虽然表面上看像...
8. **CssClass属性**：可以直接在GridView控件上设置一个通用的CSS类，这样所有行都将继承这个类的样式。 9. **SkinID**：ASP.NET中，可以为GridView定义皮肤ID，然后在Web.config或母版页中全局引用，实现多处控件...
该网页大作业代码集展示了基于HTML、CSS及JavaScript的静态网页设计实践。项目中包含了多种不同主题的网页设计案例，适用于教育机构中的学生完成其期末作业或课程设计任务。接下来将对这些技术知识点进行详细阐述。 ...
- **通用样式**： - `* { padding: 0px; margin: 0px; }`：全局清除默认的内边距和外边距。 - `body { text-align: center; font-size: 12px; }`：设置文档体的文本对齐方式和字体大小。 - **容器样式**： - `....
Sea.js 是一种模块加载器，遵循CMD规范，实现JavaScript代码的模块化，按需加载。 14. **RequireJS** RequireJS 是另一种模块加载器，遵循AMD规范，支持预加载和异步加载模块。 15. **Sea.js与RequireJS关键字**...
- 当设置的属性名是JavaScript的关键字或保留字，如`class`，应使用驼峰命名法的替代属性，如`className`。在Firefox中，使用`setAttribute("class", value)`可以正常工作，但IE需要使用`setAttribute("className",...