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 相关文章推荐
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
vue-axios使用详解
May 10 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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 时间日期操作实战
2011/08/26 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python matplotlib画图实例代码分享
2017/12/27 Python
scrapy爬虫实例分享
2017/12/28 Python
Django数据库表反向生成实例解析
2018/02/06 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
电子银行营销方案
2014/02/22 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
公务员年终个人总结
2015/02/12 职场文书
学校运动会简讯
2015/07/20 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python