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性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 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
咖啡的种类和口感
2021/03/03 新手入门
浅谈PHP中的
2016/04/23 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
js form action动态修改方法
2008/11/04 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
Ajax基础知识详解
2017/02/17 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python基础教程之元组操作使用详解
2014/03/25 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python conda操作方法
2019/09/11 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
python中return的返回和执行实例
2019/12/24 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python 列表反转显示的四种方法
2020/11/16 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
升学宴主持词
2014/04/02 职场文书
初中班主任评语
2014/04/24 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers