控制类名（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二次开发-UFUN拾取平面对话框UF_UI_specify_plane

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //拾取平面对话框 ] = { , , , , , , , , }; ] ...

  2. hexo next主题深度优化(四)，自定义一个share功能，share.js。

    文章目录 背景: 开始: 引入资源: 代码 关键的一步 附:方便学习的小demo 一次成功后还出现上面的bug 结束 2018.12.23发现bug(读者可忽略) 个人博客:https://mmmmm ...

  3. CentOS部署软件and so on……

    CentOS各版本系统下载 CentOS下载地址:http://archive.kernel.org/centos-vault/ CentOS安装python3.7.2: 1.安装依赖包 yum in ...

  4. anjs 分词器初步使用

    由于ik没有歧义分词的功能,打算用anjs 对前端传递过来的数据用anjs进行分词 anjs 操作文档官网地址:http://nlpchina.github.io/ansj_seg/ 刚刚开始由于ja ...

  5. ！！！myeclipse 上加载本地图片问题，无法加载问题

    出现无法加载本地图片的问题, 原因就是把图片放到了本地项目中的image了,但是myeclipse上没有刷新 这样以后 本地的图片比在线的要快 低级错误,诶!

  6. 996弱爆了，我还能12x12, 8116+8！

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 来自长江日报 这些天"马云谈996"的话题火了 昨晚刘强东也在朋友圈发文 "8116+8!&q ...

  7. 逻辑回归，多分类推广算法softmax回归中

    转自http://ufldl.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD%92 简介 在本节中,我们介绍Softmax回归模型,该模型是log ...

  8. 使Excel中单元格内英文为Arial Narrow 中文为宋体显示打印

    因为在对数据表进行排版格式整理的时候,发现Arial Narrow字体是不支持中文的,所以中文默认为宋体,但是显示出来却不是宋体,需要双击单元格中文才显示为宋体,这样打印出来才为宋体 但是如果有很多单 ...

  9. webservice - 使用JAX-WS注解的方式快速搭建服务端和客户端

    1.Define the interface import javax.jws.WebMethod; import javax.jws.WebParam; import javax.jws.WebRe ...

  10. mac下xampp+vscode进行php程序调试

    最近折腾公司的官网,是 php 做的,搭建调试环境做个记录,我用的是 mac 机. 1.下载最新的xampp,我的版本是XAMPP for OS X 5.6.31: 2.找到 php.ini,/App ...