语法：object.className =classname   (注意大小写)

作用：获取元素的class属性，为网页内的某个元素指定一个CSS样式来更改该元素的外观

示例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > 使网页显示动态效果</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">实现与用户交互功能</p>
<input type="button" value="更改外观" onclick="modify()"/>

<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>
</html>

JavaScript控制类名（className属性）的更多相关文章

  1. javascript 之 className属性

    Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化. 1.用className 属性修改节点的css类别 代码如下: <html> ...

  2. 控制类名（className 属性）设置或返回class属性

    控制类名(className 属性) className 属性设置或返回元素的class 属性. 语法: object.className = classname 作用: 1.获取元素的class 属 ...

  3. 控制类名（className属性）

    className 属性设置或返回元素的class 属性. 语法: object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个c ...

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

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

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

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

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

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

  7. [转] JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    [From] http://www.jb51.net/article/76695.htm HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏AP ...

  8. JavaScript--控制类名（className 属性）

    className 属性设置或返回元素的class 属性. 语法: object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个c ...

  9. JS之ClassName属性使用

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

随机推荐

  1. stm32串口输出丢失第一个字符的问题及原因

    因为TC和TXE 标志位在复位的时候会被置1,导致第一次没有发送. 所以在初始化串口的时候可以增加一句 USARTx->SR=0;(如 USART1->SR=0;)

  2. 表单提交与后台PHP如何接口？

    在网页中,常常有这样那样的表单需要提交,比如登陆,比如注册,比如查询,比如填写问卷.在这样的表单提交过程中,我们究竟向后台提交了什么,是以什么形式提交的,是一个很值得探讨的问题. 提交了什么——就是我 ...

  3. solr的增删改查

    solr的配置请查看:http://www.cnblogs.com/byteworld/p/5898651.html 创建Core:(可以复制模版到solrhome\test\conf文件夹中) 简化 ...

  4. mysql5.7下的timestampn Error : Invalid default value for 'timestamp'

    表格创建是爆了个错 Error : Invalid default value for 'timestamp' 参考:http://www.jb51.net/article/71107.htm 这版本 ...

  5. virtualbox虚拟机中的centos与macos共享文件夹

    开发中需要用到linux环境,所以使用共享模式开发.通过samba服务器来实现. 环境: 虚拟机 virtualbox 虚拟系统 centos 6.6 本机 macos  192.168.1.102 ...

  6. Forward和Redirect的区别

    一:间接请求转发(Redirect) 二:直接请求转发(Forward) 用户向服务器发送了一次HTTP请求,该请求可能会经过多个信息资源处理以后才返回给用户,各个信息资源使用请求转发机制相互转发请求 ...

  7. 关于头文件的一些常用<meta>

    一.常见的<meta>(摘自百度) 1. 设置编码信息<meta http-equiv="Content-Type" Content="text/htm ...

  8. Extjs 源码组成（4.0.7）

    (function(){})()形式的自执行,构建Ext对象(0~584) 1  设置全局对象EXt:global.Ext = {}, 2 实现了Ext对象面向对象编程的基础方法,如,apply,ex ...

  9. 生产排产表DL-ZPPR002

    *&---------------------------------------------------------------------* *& Report ZPPR002 * ...

  10. Javascript理解this对象

    this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象. 通过以下几个例子加深对this的理解. (1)作为函数调用 var name = 'Jenny'; functi ...