为指定元素增加样式的js代码
更新时间：2009年12月09日 04:05:48 作者：
从此例子中发现，js对"" 与 " " ，注意中间还有一空格，解析是非常严格的。在java与net中还有待于研究。
这个函数主要是为指定的元素添加样式。相当于Jquery中的addClass(class)--为每个匹配的元素添加指定的类名。
在Jquery中要求 class (String) : 一个或多个要添加到元素中的CSS类名，请用空格分开。而这个函数也是有这样的要求。
div{ border:1px solid #ccc; width:200px; height:200px;}
.a{ background:#900; }
.b{ font-size:30px; font-weight:bold;}
function addClass(elements, value)
{
if (!elements.className) {
elements.className = value;
}
else
{
newClass = elements.className;
newClass += " ";
newClass += value;
elements.className = newClass;
}
}
window.onload = function ()
{
var test = document.getElementById('test');
alert(test.className);
addClass(test, 'a b');
//addClass(test, 'b');
}
<div id="test">这里是测试层</div>
在Jquery中要求 class (String) : 一个或多个要添加到元素中的CSS类名，请用空格分开。而这个函数也是有这样的要求。
复制代码 代码如下:
div{ border:1px solid #ccc; width:200px; height:200px;}
.a{ background:#900; }
.b{ font-size:30px; font-weight:bold;}
复制代码 代码如下:
function addClass(elements, value)
{
if (!elements.className) {
elements.className = value;
}
else
{
newClass = elements.className;
newClass += " ";
newClass += value;
elements.className = newClass;
}
}
window.onload = function ()
{
var test = document.getElementById('test');
alert(test.className);
addClass(test, 'a b');
//addClass(test, 'b');
}
<div id="test">这里是测试层</div>
相关文章
这篇文章主要是对JavaScript中的不可见数据类型进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了在IE8上JS实现combobox支持拼音检索功能的相关资料，本文介绍的非常详细，具有参考借鉴价值,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了javascript动态生成树形菜单的方法,涉及JavaScript针对页面元素与属性的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
今天一个网友想让他的广告随机显示，每次刷新广告的内容都不一样，经过参考源码网站分析就是通过下面代码实现，特分享下方便需要的朋友2013-08-08
这篇文章主要介绍了深入理解es6块级作用域的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
正如标题所言使用js操作按下Enter焦点移至下一个控件，具体的实现示例如下，需要的朋友可以参考下2013-12-12
BootStrap下的弹出框加载select2框架失败的解决方法
本文通过简单的代码给大家介绍了BootStrap下的弹出框加载select2框架失败的解决方法，需要的朋友参考下吧2017-08-08
package.json俗称依赖配置文件（我自己取的名）,最主要的作用就是管理项目中所用到的依赖,下面这篇文章主要给大家介绍了关于package.json属性的相关资料,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了js实现Form栏显示全格式时间时钟效果代码,可读取当前的完整时间并实时显示,非常具有实用价值,需要的朋友可以参考下2015-08-08
Web Woker与主线程通信场景下对postMessage的简洁封装详解
这篇文章主要为大家介绍了Web Woker与主线程通信场景下对postMessage的简洁封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
最新评论