javascript 之 className属性
Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。
1、用className 属性修改节点的css类别
代码如下：
<html>
<head>
<title>追加CSS类别</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
11 text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy = document.getElementsByTagName("ul")[0];
oMy.className = " myUL2"; //修改CSS类
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>
运行结果：
点击之后为 
2、追加css类别
<html>
<head>
<title>追加CSS类别</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy = document.getElementsByTagName("ul")[0];
oMy.className += " myUL2"; //追加CSS类,注意" myUL2"前面的空格.
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
24 <li>JavaScript</li>
25 <li>CSS</li>
</ul>
</body>
</html>
运行时，单击列表后，实际上<ul> 的class 属性变为：
<ul onclick="check()" class="myUL1 myUL2">
所以添加css类别的时候类名之前一定要添加空格，才可以实现属性追加。重要的事情说三遍，加空格！加空格！！加空格！！！
运行结果如下：
点击之后为 
javascript 之 className属性的更多相关文章
- (四)学习JavaScript之className属性
参考:http://www.w3school.com.cn/jsref/prop_classname.asp HTML DOM Anchor 对象 定义和用法 className 属性设置或返回元素的 ...
- javascript中ClassName属性的详解与实例
在javascritp中,我们可以通过style属性可以控制元素的样式,从而实现行为层通过DOM的style属性去干预显示层显示的目标,但是这种方法是不好的,而且为了实现通过DOM脚本设置的样式,你不 ...
- JavaScript之ClassName属性学习
在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你 ...
- JavaScript控制类名（className属性）
语法:object.className =classname (注意大小写) 作用:获取元素的class属性,为网页内的某个元素指定一个CSS样式来更改该元素的外观 示例: <!DOCTYP ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- JavaScript之Style属性学习
当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...
- javascript中类的属性研究
原文:javascript中类的属性研究 本篇文章主要针对javascript的属性进行分析,由于javascript是一种基于对象的语言,本身没有类的概念,所以对于javascript的类的定义有很 ...
- JS之ClassName属性使用
一.style与className属性的对比 在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不 ...
- JavaScript DOM 元素属性 状态属性
JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...
随机推荐
- JavaScript算数
常数 Math.E 圆周率 Math.PI 2的平方根 ...
- Redis学习笔记（三）
一.数据备份与恢复 数据备份: localhost:> save OK 该命令会在redis的安装目录中创建文件dump.rdb,并把数据保存在该文件中 查看redis的安装目录: localh ...
- Pycharm中F4查看函数的相关小BUG
我们都知道在Pycharm中我们要快速查看某个函数或者模块的源码,可以在该函数上按F4快捷键,其可以打开源码相关的.py文件,这两天偶然发现起打开的文件不一定是对的. -代码如下: import os ...
- Linux系统自启动脚
只需编辑/etc/init.d/rc.local文件,在最后加上你的脚本即可. 比如:我已经编写了一个脚本shell.sh,存放在/home/mars704/Desktop/ 下面在终端输入 gedi ...
- Git-Git初始化
创建版本库及第一次提交 通过如下操作来查看一下您的Git版本. $ git --version git version 1.7.4 在开始 Git 之旅之前,我们需要设置一下 Git 的配置变量,这是 ...
- Fiddler用AutoResponder实现app升级异步更新
先说一下我自己理解的异步更新:用app异步升级举例,app是否升级的检查是在启动app时访问服务器的,把app本地的最新版本号与服务器端的最新版本号做对比,假如不一致,则提示升级.但本次已经打开使用a ...
- laravel5.2总结--任务调度
你可以通过 command() 来调用 artisan 命令, call 来调用方法或函数, 或者 terminal() 来执行单行命令脚本: 1.在app/Console/Commands文件夹 ...
- 安卓手机关闭底部键盘灯的方法（htc G11亲测有效）
还在因为看电子书和看电影时键盘灯刺眼而苦恼吗？下面提供一个方法关闭键盘灯，让你轻松DIY！ 1、手机必须先Root。使用RE管理器，按照这个路径，找到文件：brightness sys/devices ...
- Excel动画教程50例（二）
Excel动画教程50例(二) 16.用好Excel的“搜索函数” 17.在Excel中插入超级链接 18.在Excel中打印指定页面 19.在Excel中直接编辑“宏” 20.用窗体调用“宏” 21 ...
- 5、CSS基础part-3
1.CSS列表 ①类型 ul.disc {list-style-type: disc} ②位置 ul.inside {list-style-position: inside} ③列表图像 2.表格