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 this关键字使用分析
Oct 21 Javascript
js no-repeat写法 背景不重复
Mar 18 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
js实现幻灯片轮播图
Aug 14 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将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
Puppet的一些技巧
2018/09/17 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python实现list反转实例汇总
2014/11/11 Python
python fabric使用笔记
2015/05/09 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
python speech模块的使用方法
2020/09/09 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
北京SQL新华信咨询
2016/09/30 面试题
公务员培训自我鉴定
2014/02/01 职场文书
人代会标语
2014/06/30 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
iPhone13再次曝光
2021/04/15 数码科技
mysql的数据压缩性能对比详情
2021/11/07 MySQL
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers