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 相关文章推荐
动态加载iframe
Jun 16 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
vue-loader教程介绍
Jun 14 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
微信小程序之数据绑定原理解析
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根据IP判断地区名信息的示例代码
2014/03/03 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
javascript之函数直接量(function(){})()
2007/06/29 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
Python装饰器原理与用法分析
2018/04/30 Python
python基于http下载视频或音频
2018/06/20 Python
Python global全局变量函数详解
2018/09/18 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
儿子婚宴答谢词
2014/01/09 职场文书
服务生自我鉴定
2014/01/22 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
职称评定自我鉴定
2014/03/18 职场文书
任命书怎么写
2014/06/04 职场文书
辩护词范文大全
2015/05/21 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
学习党史心得体会2016
2016/01/23 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers