控制类名（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_MODL_trace_a_ray的用法

    今天是国庆节,放假休息懒得动,没有出去玩,在家研究一下发射线函数UF_MODL_trace_a_ray.小弟以前在软件公司混的时候,当时我做的那个项目就用到了UF_MODL_trace_a_ray,当 ...

  2. github如何用浏览器直接打开项目里的html页面？

    very easy 第一步 点击html页面 第二步,在地址栏前加 htmlpreview.github.io/?就可以访问

  3. js对象属性值初始化封装函数

    在平常做项目的过程中,总是会遇到需要对一个已经定义过的对象的属性值进行初始化,且对象的属性值的类型有多种(string.number.array.object.boolean),为了方便自己就简单封装 ...

  4. <后端>Flask框架

    1.Flask框架安装 简介:轻量级WEB框架,类似于简单版本的Django pip install flask 环境文件生成 pip freeze > requirement.txt 环境文件 ...

  5. 各种图片特效，你想要吗？你不是真的想要吧？【纯CSS实现】

    html部分: <!DOCTYPE html> <html lang="en" class="no-js"> <head> ...

  6. ASP.NET 页面的生命周期

    本文转载自清风飘过的博客,地址:http://www.cnblogs.com/couhujia/archive/2010/04/23/1718405.html 页面生命期分三个阶段:建立阶段,回发阶段 ...

  7. Leetcode973. K Closest Points to Origin最接近原点的K个点

    我们有一个由平面上的点组成的列表 points.需要从中找出 K 个距离原点 (0, 0) 最近的点. (这里,平面上两点之间的距离是欧几里德距离.) 你可以按任何顺序返回答案.除了点坐标的顺序之外, ...

  8. 阿里云应用上边缘云解决方案助力互联网All in Cloud

    九月末的杭州因为一场云栖大会变得格外火热. 9月25日,吸引全球目光的2019杭州云栖大会如期开幕.20000平米的展区集结数百家企业,为数万名开发者带来了一场前沿科技的饕餮盛宴. 如同往年一样,位于 ...

  9. luoguP3414 SAC#1 - 组合数

    题目背景 本题由世界上最蒟蒻最辣鸡最撒比的SOL提供. 寂月城网站是完美信息教室的官网.地址:http://191.101.11.174/mgzd . 题目描述 辣鸡蒟蒻SOL是一个傻逼,他居然觉得数 ...

  10. Delphi定时模拟键盘按键例程

    delphi模拟键盘按键实例delphi模拟键盘按键实例,只是模拟一个按键的例子而已.到一定时间按下模拟按下一个按键,delphi7编译通过. 10秒点击一下H键,其他键你们去找数值替换吧,网上大把的 ...