为指定元素增加样式的js代码


Posted in Javascript onDecember 09, 2009

这个函数主要是为指定的元素添加样式。相当于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>

Javascript 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
Angular17之Angular自定义指令详解
Jan 21 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 #Javascript
javascript OFFICE控件测试代码
Dec 08 #Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 #Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 #Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 #Javascript
JavaScript Cookie的读取和写入函数
Dec 08 #Javascript
jquery 双色表格实现代码
Dec 08 #Javascript
You might like
php流量统计功能的实现代码
2012/09/29 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
详解angular笔记路由之angular-router
2017/09/12 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
js实现批量删除功能
2020/08/27 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python的mysqldb安装步骤详解
2017/08/14 Python
详解python基础之while循环及if判断
2017/08/24 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
高中同学会活动方案
2014/08/14 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
婚前协议书范本
2014/10/27 职场文书
2015年外联部工作总结
2015/04/03 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
Python if else条件语句形式详解
2022/03/24 Python