控制类名（className 属性）

className 属性设置或返回元素的class 属性。

语法：

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码，获得 <p> 元素的 class 属性和改变className：

结果:

任务

我们通过className属性来设置元素的样式:

1.在右边编辑第33行补充代码，给id="p1"元素通过className添加"类名为one"的样式。当点击"添加样式"按钮，第一段文字添加样式。

2.在右边编辑第37行补充代码，给id="p2"元素通过className修改为"类名为two"的样式。当点击"更改外观"按钮，第二段文字更改样式。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<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" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>

    <input type="button" value="添加样式" onclick="add()"/>

	<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</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>

控制类名（className 属性）设置或返回class属性的更多相关文章

  1. 窗体Form的FormStyle属性设置为fsStayOnTop时属性设置不起作用问题探讨。

    procedure CreateParams(var Params: TCreateParams); override; procedure MainForm.Createparams(var Par ...

  2. 控制类名（className属性）

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

  3. pthread_create()之前的属性设置

    一.pthread_create()之前的属性设置1．线程属性设置我们用pthread_create函数创建一个线程,在这个线程中,我们使用默认参数,即将该函数的第二个参数设为NULL.的确,对大多数 ...

  4. DEVexpress GridControl 属性设置

    1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...

  5. DEV控件：gridControl常用属性设置（转载）

    特别长,先撸下来再说 1.隐藏最上面的GroupPanel  gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值  sValue=T ...

  6. DEV控件：gridControl常用属性设置

    1.隐藏最上面的GroupPanel  gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值  sValue=Table.Rows[g ...

  7. DEV控件GridControl常用属性设置

    1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...

  8. C# 中winform的一些属性设置

    1 窗体的大小固定住,不能调整其大小 窗体FormBorderStyle 属性设置为 FixedSingle; MaximizeBox 属性设置为false; MinimizeBox  属性设置为  ...

  9. DEV控件GridControl常用属性设置（转）

      1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView. ...

随机推荐

  1. Elasticsearch集群状态查看命令

    _cat $ curl localhost:9200/_cat=^.^=/_cat/allocation/_cat/shards/_cat/shards/{index}/_cat/master/_ca ...

  2. 53 windows 系统下

    0 引言 本篇主要记录windows下编程以及系统安装与恢复等问题. 1 Visual Studio (1)debug "warning LNK4042: 对象被多次指定:已忽略多余的指定& ...

  3. mysql在win系统dos 安装版配置步骤详解

    1.准备工作 下载mysql的最新免安装版本mysql-noinstall-5.1.53-win32.zip,解压缩到相关目录,如:d:\ mysql-noinstall-5.1.53-win32.这 ...

  4. Photon Server的服务器端配置

    Photon Server与Unity3D的交互分为3篇博文实现 (1)Photon Server的服务器端配置 (2)Photon Server的Unity3D客户端配置 (3)Photon Ser ...

  5. LeetCode 1108. Defanging an IP Address (IP 地址无效化)

    题目标签:String 题目给了我们一组 ip address,让我们把 . 变成 [.],这题可以用replace,但是这样做的话,好像没意义了.所以还是走一下array,具体看code. Java ...

  6. 4-MySQL拆分表

    如上图,将goods表中的cate_name字段拆分一个商品分类表goods_cates,步骤如下: 1,创建商品分类表-goods_cates; create table goods_cates( ...

  7. iOS逆向系列-tweak补充

    tweak加载资源 开发自己的deb插件需要加载自己的资源,比如图片资源.iOS中常用的两种加载图片资源的方式: + (nullable UIImage *)imageNamed:(NSString ...

  8. layui实现已知被选中的option，怎样渲染

    在项目中用到layui实现第几个option 实现,在select中渲染出需要展示的option 代码: $("#period option[value="+res.data.se ...

  9. Python自学:第五章 使用range( )创建数字列表

    # -*- coding: GBK -*- number = list(range(1,6)) print(number) 输出为: [1, 2, 3, 4, 5] 2. # -*- coding: ...

  10. JavaScript - setTimeout()和setInterval()

    setTimeout() 和 setInterval() 方法, 用于在指定的毫秒数后调用函数或表达式 // 1秒钟后执行 function(), 只执行一次 var a = setTimeout(f ...