控制类名（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. NX二次开发-将信息窗口中的文本保存到文本文件中UF_UI_save_listing_window

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //打开信息窗口 UF_UI_open_listing_window() ...

  2. （转）简述负载均衡&CDN技术

    转:http://www.cnblogs.com/mokafamily/p/4402366.html#commentform 曾经见到知乎上有人问“为什么像facebook这类的网站需要上千个工程师维 ...

  3. RoadFlow2.7.5 MyController.cs

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  4. PAT_A1102#Invert a Binary Tree

    Source: PAT A1102 Invert a Binary Tree (25 分) Description: The following is from Max Howell @twitter ...

  5. 《DSP using MATLAB》Problem 8.44

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  6. Android笔记之从图库选择图片

    Demo链接:https://pan.baidu.com/s/1T4T2pTEswmbcYYfpN3OwDw,提取码:pzqy 参考链接:[Android Example] Pick Image fr ...

  7. 【csp】2018-3

    第一题 跳一跳 题目: 题意:浅显.qwq 题解:2计数+1,到1就清空计数. 代码: #include<iostream> #include<cstdio> #include ...

  8. [每日一个小技巧] CentOS 下使用yum安装一类软件包

    版权声明:本文为博主原创文章,欢迎转载,转载请注明出处. https://blog.csdn.net/robertsong2004/article/details/37775313 yum 提供了丰富 ...

  9. 解决通过vmware克隆虚拟机后，无法上网的问题

    注意:如果源主机是CentOS 6.8,复制出来的机器会出现无法上网. 如果源主机是CentOS 7,复制出来的机器可以正常上网.复制后,只要改下IP地址即可上网. 出现该问题的原因是,我们克隆后,将 ...

  10. Docker学习の更改Docker的目录

    一.更改虚拟磁盘的目录 虚拟机的默认存储位置是C:\Users\Administrator\.docker\machine\machines ,后期docke镜像文件会不断增加,为了给系统盘减负,最好 ...