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 相关文章推荐
js中最容易被忽视的事件问题大总结
May 15 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
js实现双色球效果
Aug 02 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
一个简单的php路由类
2016/05/29 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
Python装饰器decorator用法实例
2014/11/10 Python
Python中super关键字用法实例分析
2015/05/28 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python如何实现FTP功能
2020/05/28 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
不打扫卫生检讨书
2014/02/12 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
银行贷款收入证明
2014/10/17 职场文书
小平您好观后感
2015/06/09 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers