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 函数调用模式小结
Dec 26 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
vue实现跨域的方法分析
May 21 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
javascript 日期常用的方法
2009/11/11 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
Python自动扫雷实现方法
2015/07/25 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
python实现猜数游戏
2020/03/27 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
党员批评与自我批评
2014/02/12 职场文书
期中考试反思800字
2014/05/01 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
MySQL中连接查询和子查询的问题
2021/09/04 MySQL