JavaScript 拾碎[三] 使用className属性

A 三位一体的页面
网页的结构层（Structure ）由HTML 或XHTML 创建；
网页的表现层（Presentation ）由CSS 来创建；
网页的行为层（Behavior ）由Javascript 和DOM 所完成；

其实，网页的表现层和行为层总是存在的，即使用户没有去定义。因为Web 浏览器会把自身默认的样式和事件加载到网页的结构层上。

B 使用className 属性
Javascript 还可以通过className 属性灵活的更改一个标签元素的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>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>

运行时，单击列表后，实际上<ul> 的class 属性变为：
<ul onclick="check()" class="myUL1 myUL2">

注意：
i > 如果是直接修改className 属性值，则是对CSS 进行替换；
ii > 但以上代码不是将原有的CSS 样式覆盖，而是对现有CSS 样式进行追加。
追加的前提是：保证追加的CSS 与原先的CSS 不重复；

经验：
浏览器之间显示的差异，通常都是因为各个浏览器本身对CSS 属性的默认值不同所导致的。
通常的解决办法是：程序员自己指定该值，而不让浏览器使用其默认值即可。

赞 (0)

相关推荐

  • 获取JavaScript用户自定义类的类名称的代码

    我们知道,虽然JavaScript是基于对象(object-based)的语言.但是使用其原形(prototype)特性,我们完全可以实现十分sexy的OO编成框架,这个可以看看经典论坛的文章'基本上实现 javascript 的 OOP (0423版)'. 不过虽然我们实现了'类'这种概念,可是JavaScript的脚本系统却仍然是不认账的.我们并没有办法使用脚本系统中的typeof方法获取自定义类的类型,比如'类'JSClass定义如下: function JSClass()  {     

  • javascript自定义的addClass()方法

    复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClassName+= " "; newClassName+= value ; element.className = newClassN

  • java中instanceof和getClass()的区别分析

    class A { } class B extends A { } Object o1 = new A();  Object o2 = new B(); o1 instanceof A => true  o1 instanceof B => false  o2 instanceof A => true // <================ HERE  o2 instanceof B => true o1.getClass().equals(A.class) => t

  • javascript实现类似java中getClass()得到对象类名的方法

    本文实例讲述了javascript实现类似java中getClass()得到对象类名的方法.分享给大家供大家参考.具体如下: 在javascript中没有能够返回特定类型名的函数 如一个对象 console.log(obj); 得到的是[object HtmlTableCellElement]如果想要一个函数能够返回HtmlTableCellElement js中默认没有这样的函数 可以自己实现一个 var getObjectClass = function (obj) { if (obj &&a

  • JavaScript中的类(Class)详细介绍

    在JavaScript中,可以使用类(Class)来实现面向对象编程(Object Oriented Programming).不过,JavaScript中的类与Java中的有所不同,其相应的定义和使用也不一样. JavaScript中类的定义 在JavaScript中,所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类:也就是说,JavaScript中的类是一个对象集合的概念,如果两个对象它们的prototype相同,那么它们就属于同一个类:JavaScript中的类甚至都

  • JavaScript更改class和id的方法

    是className,可不是class 注意JavaScript使用的是className去访问class属性,因为class是一个保留关键字,因为将来JavaScript可能开始支持像Java一样的类. 我们在讨论style属性时遇到了棘手的细节问题和浏览器差异性带来的麻烦,正如同经历一场惊涛骇浪.而class和id的更改则像是沙漠里一片平静的绿洲,浏览器们在这里和谐相处.思考这个例子: p { color: #000000; /* black */ } p.emphasis { color:

  • Java反射学习 getClass()函数应用

    Java反射学习 所谓反射,可以理解为在运行时期获取对象类型信息的操作.传统的编程方法要求程序员在编译阶段决定使用的类型,但是在反射的帮助下,编程人员可以动态获取这些信息,从而编写更加具有可移植性的代码.严格地说,反射并非编程语言的特性,因为在任何一种语言都可以实现反射机制,但是如果编程语言本身支持反射,那么反射的实现就会方便很多. 1,获得类型类 我们知道在Java中一切都是对象,我们一般所使用的对象都直接或间接继承自Object类.Object类中包含一个方法名叫getClass,利用这个方

  • JavaScript 拾碎[三] 使用className属性

    A 三位一体的页面 网页的结构层(Structure )由HTML 或XHTML 创建: 网页的表现层(Presentation )由CSS 来创建: 网页的行为层(Behavior )由Javascript 和DOM 所完成: 其实,网页的表现层和行为层总是存在的,即使用户没有去定义.因为Web 浏览器会把自身默认的样式和事件加载到网页的结构层上. B 使用className 属性 Javascript 还可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化

  • JavaScript学习笔记(三)：JavaScript也有入口Main函数

    在C和Java中,都有一个程序的入口函数或方法,即main函数或main方法.而在JavaScript中,程序是从JS源文件的头部开始运行的.但是某种意义上,我们仍然可以虚构出一个main函数来作为程序的起点,这样一来不仅可以跟其他语言统一了,而且说不定你会对JS有更深的理解. 1. 实际的入口 当把一个JavaScript文件交给JS引擎执行时,JS引擎就是从上到下逐条执行每条语句的,直到执行完所有代码. 2. 作用域链.全局作用域和全局对象 我们知道,JS中的每个函数在执行时都会产生一个新的

  • JavaScript常用对象的方法和属性小结

    本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩的网页.在这一部分里,我们将介绍到如何使用与串对象有关的方法和属性. 1.串对象的length属性 串对象仅有一个属性length,这个属性值表示这个串所包括字符的相对数目.语法为: stringName.length 2.串对象的方法 JavaScript提供了多个串方法以帮助控制显示信息.串方法可以分为几个大类,如属性方

  • JavaScript复制变量三种方法实例详解

    这篇文章主要介绍了JavaScript复制变量三种方法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 直接将一个变量赋给另一个变量时,系统并不会创造一个新的变量,而是将原变量的地址赋给了新变量名.举个栗子: 复制代码 复制代码 let obj = { a: 1, b: 2, }; let copy = obj; obj.a = 5; console.log(copy.a); // Result // a = 5; // 更改obj的值,

  • JavaScript数组类型Array相关的属性与方法详解

    Array数组类型详解 在ECMAScript中除了object类型之外,Array数组用的是最常用的类型.ECMAScript数组可以在每一项存储任何类型的值,无需指定数组的长度,还可以随着数据的增长来增加数组长度,这些是和其他语言的数组不同的. 1.数组的创建方法 数组字面量方式 var arr = [1,2,3,4,5];// 简单直接用中括号包裹构建数组 数组构造函数 var arr = new Array(1,2,3,4,5);// 通过内置Array对象构建数组 2.检测数组 ins

  • JavaScript继承的三种方法实例

    JavaScript继承的三种方法实例

    继承 1. 什么是继承 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承. 继承也是为了数据共享,js中的继承也是为了实现数据共享 我们可以联想到原型,他的两个作用是: 原型作用之一:数据共享,节省内存空间 原型作用之二:为了实现继承 继承是一种关系:父类级别与类级别的关系 例子: 人类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学生类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学习行为 老师类别: 姓名, 性别, 年龄

  • 总结JavaScript中BigIn函数常见的属性

    总结JavaScript中BigIn函数常见的属性

    目录 一.概述 二.属性 1. 数学运算符 2. 比较运算符 3. 布尔运算 三.总结 一.概述 BigInt 是一种特殊的数字类型,它提供了对任意长度整数的支持. 创建 bigint 的方式有两种:在一个整数字面量后面加 n 或者调用 BigInt 函数,该函数从字符串.数字等中生成 bigint. const bigint = 1234567890123456789012345678901234567890n; const sameBigint = BigInt("1234567890123

  • javascript 中动画制作方法 animate()属性

    animate是个非常冷门的方法,以至于百度和手册上都找不到相关的资料.当然通过一个小小的demo,我还是发现了方法的一些属 animate是所有dom元素都有的方法,可以用来最做过度动画,关键帧动画.这个方法可以更方便的让我们制作动 animate共有两个参数 (很可惜似乎没有回调函数,没发现) 关键帧 (参数可以是数组或对象,数组内包裹的也必须是对象)对象里的属性就是css属性和值了 动画属性设置 {参数数字或者对象} 目前发现的属性有以下 : duration: 动画时长 (单位毫秒) i

  • JavaScript 键盘事件的处理及属性详解

    目录 引言 处理键盘事件 键盘事件属性 引言 JavaScript 中的事件,当用户或浏览器尝试操作页面时,就会发生事件来处理 JavaScript 与HTML的交互.正如大家所知,JavaScript 与HTML一起工作,因此,页面加载.单击按钮.最小化窗口.单击鼠标.敲打键盘等发生的一切都是事件.就像在单击按钮时向用户显示任何消息一样,这是通过事件发生的. 所有HTML元素(如按钮.文本框.图像)都可以包含可以使用 JavaScript 代码触发的事件.所有这些事件都是DOM的一部分(文档对

  • JavaScript通过prototype给对象定义属性用法实例

    本文实例讲述了JavaScript通过prototype给对象定义属性的用法.分享给大家供大家参考.具体分析如下: 下面的JS代码定义了movie对象.在使用对象的过程中又通过prototype给对象添加了isComedy属性,调用的时候直接使用object.isComedy即可,非常方便. <script type="text/javascript"> <!-- function movieToString() { return("title: "

随机推荐