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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
js添加事件的通用方法推荐
May 15 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 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
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
laravel学习教程之存取器
2016/07/30 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Python创建文件和追加文件内容实例
2014/10/21 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
python颜色随机生成器的实例代码
2020/01/10 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
启动仪式策划方案
2014/06/14 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript