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 ...
随机推荐
- 20190102(多线程，守护线程，线程互斥锁，信号量，JoinableQueue)
多线程 多进程: 核心是多道技术,本质上就是切换加保存技术. 当进程IO操作较多,可以提高程序效率. 每个进程都默认有一条主线程. 多线程: 程序的执行线路,相当于一条流水线,其包含了程序的具体执行步 ...
- But You Didn'd【但是你没有】
But You Didn't Remember the day I borrowed your brand new car and dented it? I thought you'd kill me ...
- TI C6000 优化进阶：循环最重要！
软件流水循环 1. C6000流水线(Pipeline) 一个指令的处理过程并不是一步完成,它被分为三个阶段:取指(Fetch).译码(Decode).执行(Excute).将每一个阶段放入独立的流程 ...
- HDU 6228 tree 简单思维树dp
一.前言 前两天沈阳重现,经过队友提点,得到3题的成绩,但是看到这题下意识觉得题目错了,最后发现实际上是题目读错了....GG 感觉自己前所未有的愚蠢了....不过题目读对了也是一道思维题,但是很好理 ...
- 其它- in-place
in-place 刷编程题的时候,经常遇到题目要求do in-place.所以就上网搜了相关概念,简单总结一下. in-place操作,意思是所有的操作都是”就地“操作,不允许进行移动,或者称作 ...
- Kali 网络配置
一.配置IP 编辑/etc/network/interfaces # This file describes the network interfaces available on your syst ...
- poj2631 Roads in the North（求树的直径）
Roads in the North Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2941 Accepted: 144 ...
- leetcode 【 Subsets II 】python 实现
题目: Given a collection of integers that might contain duplicates, S, return all possible subsets. No ...
- 【SCOI 2010】传送带
为了方便,我们不妨设$\rm P \lt Q,R$ 我们发现,有$\rm E$点在$\rm AB$上,$\rm F$点在$\rm CD$上,最优解一定是$\rm AE\rightarrow EF\ri ...
- java包、类、方法、属性、常量命名规则
必须用英文,不要用汉语拼音 1:包(package):用于将完成不同功能的类分门别类,放在不同的目录(包)下,包的命名规则:将公司域名反转作为包名.比如www.sohu.com 对于包名:每个字母都需 ...