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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
js函数般调用正则
Apr 08 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
Angular4 反向代理Details实践
May 30 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
利用Python演示数型数据结构的教程
2015/04/03 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
python识别验证码图片实例详解
2020/02/17 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
财务情况说明书范文
2014/05/06 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
工地食品安全责任书
2015/05/09 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
2016党校培训心得体会
2016/01/07 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技