控制类名（className 属性）设置或返回class属性
控制类名（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属性的更多相关文章
- 窗体Form的FormStyle属性设置为fsStayOnTop时属性设置不起作用问题探讨。
procedure CreateParams(var Params: TCreateParams); override; procedure MainForm.Createparams(var Par ...
- 控制类名（className属性）
className 属性设置或返回元素的class 属性. 语法: object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个c ...
- pthread_create()之前的属性设置
一.pthread_create()之前的属性设置1．线程属性设置我们用pthread_create函数创建一个线程,在这个线程中,我们使用默认参数,即将该函数的第二个参数设为NULL.的确,对大多数 ...
- DEVexpress GridControl 属性设置
1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...
- DEV控件：gridControl常用属性设置（转载）
特别长,先撸下来再说 1.隐藏最上面的GroupPanel gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值 sValue=T ...
- DEV控件：gridControl常用属性设置
1.隐藏最上面的GroupPanel gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值 sValue=Table.Rows[g ...
- DEV控件GridControl常用属性设置
1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...
- C# 中winform的一些属性设置
1 窗体的大小固定住,不能调整其大小 窗体FormBorderStyle 属性设置为 FixedSingle; MaximizeBox 属性设置为false; MinimizeBox 属性设置为 ...
- DEV控件GridControl常用属性设置（转）
1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView. ...
随机推荐
- C++之引用与符号“&”
一.&的意思: 1.取地址符,这时候它用于数据的前面,比如int a=&b; 2.C++里还使用&作为引用符,如果你确认程序是标准的C而非C++的话,那么可以排除是引用了.引用 ...
- linux网络速率监控
#!/bin/bash #作者:fafu_li #时间: #监控网卡传输速率 source /etc/profile #加载系统环境变量 source $HOME/.bash_profile #加载用 ...
- iOS开发UIResponder简介API
#import <Foundation/Foundation.h> #import <UIKit/UIKitDefines.h> #import <UIKit/UIEve ...
- AtCoder ABC 130F Minimum Bounding Box
题目链接:https://atcoder.jp/contests/abc130/tasks/abc130_f 题目大意 给定地图上 N 个点的坐标和移动方向,它们会以每秒 1 个单位的速度移动,设 A ...
- 2018湘潭大学程序设计竞赛【C】
题目链接:https://www.nowcoder.com/acm/contest/105/C 题意:给你几个矩形的左上角和右下角的坐标,让你算有几个矩形相交. 题解: 每次都暴力标记一下炸弹区域里的 ...
- NFS服务器简易安装
1.服务端 创建挂载目录 # mkdir /data/nfs 安装NFS软件 # yum install nfs-utils -y 添加配置信息 # vim /etc/exports /data/nf ...
- 以 Ubuntu 为例：清理 linux 系统的"垃圾"文件
clean 命令删除所有的软件安装包. 在网络连接正常的情况下,我们执行软件安装命令,软件安装结束后,以 .deb 为后缀的软件包就不再需要了.这种情况和 Windows 平台.手机的安卓平台上的情况 ...
- 2018-8-10-win10-uwp-在-Canvas-放一个超过大小的元素会不会被裁剪
title author date CreateTime categories win10 uwp 在 Canvas 放一个超过大小的元素会不会被裁剪 lindexi 2018-08-10 19:16 ...
- 2018-10-8-3分钟教你搭建-gitea-在-Centos-服务器
title author date CreateTime categories 3分钟教你搭建 gitea 在 Centos 服务器 lindexi 2018-10-08 09:54:39 +0800 ...
- JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。
编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...