控制类名(className 属性)设置或返回class属性
2024-09-07 20:35:02
控制类名(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>
最新文章
- YY一下十年后的自己
- shareSDK实现分享操作时只显示英文字体
- 如何防止ElasticSearch集群出现脑裂现象(转)
- Java集合的运算之减法A-B
- 编译rnnlib
- 3D中的切线空间简介
- What is the Database Initialization Parameter That is Associated to an ORA-32004 Error ?
- Tomcat的SessionID引起的Session Fixation和Session Hijacking问题
- C#中如何计算时间差?
- The Promise of Deep Learning
- Merge Sorted Array 解答
- 【JAVAWEB学习笔记】25_基础加强:类加载器、注解 @xxx和动态代理
- 解决Warning: mysql_connect(): Headers and client library minor version mismatch. 警告
- day 58 bootstrap part2
- Python3,x:Fiddler抓包工具如何进行手机APP的数据爬取
- 自学Zabbix之路15.1 Zabbix数据库表结构简单解析-Hosts表、Hosts_groups表、Interface表
- MongoDB--$project和$push的区别
- ztree根据treeId展开指定节点并触发单击事件
- Hadoop开发第2期---虚拟机中搭建Linux
- 升级MAC OX上的Python到3.4
热门文章
- Ubuntu安装msf
- NX二次开发-UFUN拾取平面对话框UF_UI_specify_plane
- C语言-实例3个数由小到大排序
- hdu多校第七场 1011 (hdu6656) Kejin Player 概率dp
- mysql删除字段为null的数据
- 微信-小程序-开发文档-服务端-接口调用凭证:auth.getAccessToken
- PAT_A1043#Is It a Binary Search Tree
- jquery的attr获取表单checked 布尔值问题
- <;爬虫实战>;糗事百科
- 【ARC072E】Alice in linear land