Javascript通过控制类名更改样式


Posted in Javascript onMay 24, 2019

控制类名(className 属性)

className 属性设置或返回元素的class 属性。

语法:

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
redux.js详解及基本使用
May 24 #Javascript
javascript获取元素的计算样式
May 24 #Javascript
运用js实现图层拖拽的功能
May 24 #Javascript
了解javascript中let和var及const关键字的区别
May 24 #Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 #Javascript
小程序登录/注册页面设计的实现代码
May 24 #Javascript
微信小程序+云开发实现欢迎登录注册
May 24 #Javascript
You might like
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
浅谈Python的文件类型
2016/05/30 Python
Django Highcharts制作图表
2016/08/27 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
如何使用python操作vmware
2019/07/27 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
一名老师的自我评价
2014/02/07 职场文书
六查六看剖析材料
2014/02/15 职场文书
服务承诺书怎么写
2014/05/24 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
收银员岗位职责
2015/02/03 职场文书
办公室主任个人总结
2015/02/28 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
小学德育工作总结2015
2015/05/12 职场文书
初中语文教师研修日志
2015/11/13 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server