控制类名（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. ...
随机推荐
- 51nod 1627 瞬间移动(组合数学)
传送门 解题思路 因为每次横纵坐标至少\(+1\),所以可以枚举走的步数,枚举走的步数\(i\)后剩下的就是把\(n-1\)与\(m-1\)划分成\(i\)个有序正整数相加,所以用隔板法,\(ans= ...
- Django中的HttpResponse和JsonResponse
Django中的HttpResponse和JsonResponse 我们在编写一些借口函数的时候,经常需要给调用者返回json格式的数据,那么如何返回可直接解析的数据呢? 首先第一种方式: from ...
- Flink 1.6.0 Windows操作
原文连接 https://ci.apache.org/projects/flink/flink-docs-release-1.6/dev/stream/operators/windows.html W ...
- 专题：“find -perm”
Search for files which have read and write permission for their owner, and group, but which other us ...
- 20130324 LBP CSLBP 全局存储区 局部存储区 char c[]=”hello world”和char *str=”hello world”的区别
1.LBP and CSLBP 2.再论char c[]=”hello world”和char *str=”hello world”的区别 /**************代码1************ ...
- 使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
- iOS开发系列-打印内存地址
打印内存地址 基本数据类型 定义一个基本数据类型,会根据变量类型分配对应的内存空间.比如定义一个int类型的变量a. int a = 10; 内存如下 输入变量a在内存中内存地址 NSLog(@&qu ...
- windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问
windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问: 解决方法: 首先重命名系统盘 windows目录下的代号为“SoftwareDistribu ...
- vue-router配置子路由
1.改写App.vue 里面的代码 ,增加路由跳转,增加Hi页面1,Hi页面2的跳转 2.修改HI.vue 里面的内容,增加 <router-view class="aaa" ...
- ci用户登录
[list] 预先加载数据库操作类和Session类 即在autoload.php中,$autoload['libraries'] = array('database', 'session'); a. ...