控制类名（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. document.body / document.ducumentElement /等获取高度和宽度的区别

    document.body / document.ducumentElement /等获取高度和宽度的区别 <!DOCTYPE html> <html> <head la ...

  2. PMP项目管理——项目范围管理-规划范围管理

    规划范围管理是为记录如何定义.确认和控制项目范围及产品范围,而创建范围管理计划的过程.主要作用是,在整个项目期间对如何管理范围提供指南和方向.制定范围管理计划和细化项目范围始于对下列信息的分析:项目章 ...

  3. c++-文件分离

    实现文件分离 1.头文件中不要使用using namespace,由于c++编译的特性,由于初学还没深入了解,不做具体编译的解释 2.由于没有了命名空间,所以string定义要写成std::strin ...

  4. java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)

    :: - [localhost-startStop-] INFO - Root WebApplicationContext: initialization started -- :: - [local ...

  5. AsyncCallback IAsyncResult

    using System; using System.Threading; using System.Collections.Generic; using System.Windows.Forms; ...

  6. ecshop 学习笔记

    ECSHOP各文件夹功能说明 1.根目录:前台程序文件2.admin:后台程序文件夹   --根目录:后台程序文件  *.php文件   --help\zh_cn:各功能的帮助文件 *.xml文件   ...

  7. Linux上 安装Sorl4.7 中间件用tomcat

    最近需要用到solr,公司内部搭建了一个solr测试环境. 版本:solr4.7.2 ,tomcat 7.0.55 jdk:1.7_051 解压 solr 和tomcat  这里就不详说. 1.启动t ...

  8. Jmeter----函数助手参数化

    要填写开始日期和结束日期和赋值的变量名

  9. 【转】Windows（server2008）下使用VisualSVN Server搭建SVN服务器

    参考文献 1.Windows下使用VisualSVN Server搭建SVN服务器(百度经验)  挺好就是没有配图已验证可用 2.在Windows Server 2008上部署SVN代码管理器 把第二 ...

  10. C++之constexpr

    一.常量表达式:是指值不会改变并且在编译过程就能得到计算结果的表达式.一个对象是不是常量表达式是由它的数据类型和初始值共同决定. ;//虽然初始值是字面值常量,但是它的数据类型只是普通int. con ...