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压缩混淆工具
May 16 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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 移除数组重复元素的一点说明
2008/11/27 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
javascript时间差插件分享
2016/07/18 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
学校安全教育制度
2014/01/31 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
优秀教师个人材料
2014/12/15 职场文书