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 ...
随机推荐
- VScode的settings.json配置
{ "editor.mouseWheelZoom": true, "astyle.additional_languages": [ "c", ...
- 大数模板Java
import java.util.*; import java.math.BigInteger; public class Main{ public static void main(String a ...
- 版本控制之GitHub — — 第一步的理解
GitHub是时下最流行的版本控制的一门“技术”,此之前svn(subversion)也是同样的作用. 至于版本控制:Git是分布式的,而svn是中心式的(或者叫集中式的)版本控制系统,这是两者之间理 ...
- HTTP认证之摘要认证——Digest（一）
导航 HTTP认证之基本认证--Basic(一) HTTP认证之基本认证--Basic(二) HTTP认证之摘要认证--Digest(一) HTTP认证之摘要认证--Digest(二) 一.概述 Di ...
- app分享代码
友推是一款是面向移动应用的SDK分享组件,提供给开发者集成使用.通过友推,开发者可以轻松集成社会化分享功能,同时创建及管理推荐好友使用您应用的推荐奖励活动,用户推荐好友安装使用您的应用即可获得推荐奖励 ...
- MFC定时关机程序的实现2-添加启动项到注册表
虽然上一篇实现了的定时关机,但是还不够完善,比如开机自动启动,然后按照配置的时间定时关机,并最小化到任务栏. 先来说开机启动怎么实现,开机启动实现的方法有好几种,比如直接在开始菜单启动项里添加一个程序 ...
- 并发编程——多进程——multiprocessing开启进程的方式及其属性（3）
开启进程的两种方式——Process 方式一:函数方法 from multiprocessing import Process import time def task(name): print('% ...
- 502 Bad Gateway 怎么解决？
出现502的原因是:对用户访问请求的响应超时造成的 服务端解决办法: 1.提高 Web 服务器的响应速度,也即减少内部的调用关系,可以把需要的页面.素材或数据,缓存在内存中,可以是专门的缓存服务器 , ...
- [oldboy-django][6其他]navicat远程登录没有权限
day6-17-1204 # 增加远程访问mysql的权限(就是其他ip地址远程访问另外一个ip地址的数据库) -- step1 修改配置文件,bind_address, 允许所有ip地址都可以访问m ...
- Zookeeper ZooDefs.Ids
OPEN_ACL_UNSAFE : 完全开放的ACL,任何连接的客户端都可以操作该属性znode CREATOR_ALL_ACL : 只有创建者才有ACL权限 READ_ACL_UNSAFE:只能读 ...