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写的实用看图工具实现代码
Jul 26 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
vue项目中微信登录的实现操作
Sep 08 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
递归列出所有文件和目录
2006/10/09 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php判断访问IP的方法
2015/06/19 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Django admin美化插件suit使用示例
2017/12/12 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
总裁秘书岗位职责
2013/12/04 职场文书
实用求职信范文分享
2013/12/25 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
社区工作者演讲稿
2014/05/23 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
产品调价通知函
2015/04/20 职场文书
夏洛特的网观后感
2015/06/15 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python