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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
node中的cookie的具体使用
Sep 13 Javascript
layui--js控制switch的切换方法
Sep 03 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
详解php中 === 的使用
2016/10/24 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
VUE重点问题总结
2018/03/19 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中random模块用法实例分析
2015/05/19 Python
python实现AES加密解密
2019/03/28 Python
pandas删除指定行详解
2019/04/04 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
酒店管理自荐信
2013/10/23 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
12岁生日感言
2014/01/21 职场文书
同事打架检讨书
2014/02/04 职场文书
《春天来了》教学反思
2014/04/07 职场文书
工地食品安全责任书
2015/05/09 职场文书
2015国庆节宣传语
2015/07/14 职场文书
爱国教育主题班会
2015/08/14 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android