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属性的更多相关文章

  1. (四)学习JavaScript之className属性

    参考:http://www.w3school.com.cn/jsref/prop_classname.asp HTML DOM Anchor 对象 定义和用法 className 属性设置或返回元素的 ...

  2. javascript中ClassName属性的详解与实例

    在javascritp中,我们可以通过style属性可以控制元素的样式,从而实现行为层通过DOM的style属性去干预显示层显示的目标,但是这种方法是不好的,而且为了实现通过DOM脚本设置的样式,你不 ...

  3. JavaScript之ClassName属性学习

    在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你 ...

  4. JavaScript控制类名(className属性)

    语法:object.className =classname   (注意大小写) 作用:获取元素的class属性,为网页内的某个元素指定一个CSS样式来更改该元素的外观 示例: <!DOCTYP ...

  5. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  6. JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...

  7. javascript中类的属性研究

    原文:javascript中类的属性研究 本篇文章主要针对javascript的属性进行分析,由于javascript是一种基于对象的语言,本身没有类的概念,所以对于javascript的类的定义有很 ...

  8. JS之ClassName属性使用

    一.style与className属性的对比 在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不 ...

  9. JavaScript DOM 元素属性 状态属性

    JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...

随机推荐

  1. VScode的settings.json配置

    { "editor.mouseWheelZoom": true, "astyle.additional_languages": [ "c", ...

  2. 大数模板Java

    import java.util.*; import java.math.BigInteger; public class Main{ public static void main(String a ...

  3. 版本控制之GitHub — — 第一步的理解

    GitHub是时下最流行的版本控制的一门“技术”,此之前svn(subversion)也是同样的作用. 至于版本控制:Git是分布式的,而svn是中心式的(或者叫集中式的)版本控制系统,这是两者之间理 ...

  4. HTTP认证之摘要认证——Digest(一)

    导航 HTTP认证之基本认证--Basic(一) HTTP认证之基本认证--Basic(二) HTTP认证之摘要认证--Digest(一) HTTP认证之摘要认证--Digest(二) 一.概述 Di ...

  5. app分享代码

    友推是一款是面向移动应用的SDK分享组件,提供给开发者集成使用.通过友推,开发者可以轻松集成社会化分享功能,同时创建及管理推荐好友使用您应用的推荐奖励活动,用户推荐好友安装使用您的应用即可获得推荐奖励 ...

  6. MFC定时关机程序的实现2-添加启动项到注册表

    虽然上一篇实现了的定时关机,但是还不够完善,比如开机自动启动,然后按照配置的时间定时关机,并最小化到任务栏. 先来说开机启动怎么实现,开机启动实现的方法有好几种,比如直接在开始菜单启动项里添加一个程序 ...

  7. 并发编程——多进程——multiprocessing开启进程的方式及其属性(3)

    开启进程的两种方式——Process 方式一:函数方法 from multiprocessing import Process import time def task(name): print('% ...

  8. 502 Bad Gateway 怎么解决?

    出现502的原因是:对用户访问请求的响应超时造成的 服务端解决办法: 1.提高 Web 服务器的响应速度,也即减少内部的调用关系,可以把需要的页面.素材或数据,缓存在内存中,可以是专门的缓存服务器 , ...

  9. [oldboy-django][6其他]navicat远程登录没有权限

    day6-17-1204 # 增加远程访问mysql的权限(就是其他ip地址远程访问另外一个ip地址的数据库) -- step1 修改配置文件,bind_address, 允许所有ip地址都可以访问m ...

  10. Zookeeper ZooDefs.Ids

    OPEN_ACL_UNSAFE  : 完全开放的ACL,任何连接的客户端都可以操作该属性znode CREATOR_ALL_ACL : 只有创建者才有ACL权限 READ_ACL_UNSAFE:只能读 ...