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与vbscript数据共享
Jan 09 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
深入学习JavaScript中的bom
May 27 Javascript
JavaScript布尔运算符原理使用解析
May 06 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操作excel文件 基于phpexcel
2010/07/02 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python使用Matplotlib画饼图
2018/09/25 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
Python Selenium库的基本使用教程
2021/01/04 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
六道php面试题附答案
2014/06/05 面试题
副总经理工作职责
2013/11/28 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
先进个人事迹材料
2014/12/29 职场文书
高中运动会广播稿
2015/08/19 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle