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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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生成带有雪花背景的验证码
2006/10/09 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
使用php实现截取指定长度
2013/08/06 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
对比分析json及XML
2014/11/28 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Python中按键来获取指定的值
2019/03/02 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
《跨越百年的美丽》教学反思
2014/02/11 职场文书
校园环保标语
2014/06/13 职场文书
初中学校对照检查材料
2014/08/19 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
数学教师个人工作总结
2015/02/06 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL