<!doctype html>
<html>
<head>
<meta charset="urtf-8">
<title>通过js改变class名字改变样式</title>
<style>
.tao { /*初始样式*/
border-radius:35px;
width:100px;
height:100px;
border:1px solid #f00;
text-align:center;
line-height:100px;
}
.taot{ /*class名字为taot的样式*/
width:100px;
height:100px;
border-radius:50px;
border:1px solid #008cba;
text-align:center;
line-height:100px;
}
</style>
<script>
</script>
</head>
<body>
<div class="tao">
圆形DIV
</div>
<input type="button" value="变圆" id="shi" onclick="fn()">
<script>
//获取对象
let tao=document.getElementsByClassName("tao")[0];//通过class获取名字注意添加后面[0];
function fn(){
tao.className="taot"
}
</script>
</body>
</html>

通过javascript修改class名字-学习笔记的更多相关文章

  1. 《零基础学JavaScript(全彩版)》学习笔记

    <零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...

  2. 面图层拓扑检查和错误自动修改—ArcGIS案例学习笔记

    面图层拓扑检查和错误自动修改-ArcGIS案例学习笔记 联系方式:谢老师,135_4855_4328,xiexiaokui#139.com 数据源: gis_ex10\ex01\parcel.shp, ...

  3. 《JavaScript语言精粹》学习笔记

    一.in的用法 for...in 枚举一个对象的所有可枚举属性 检测DOM/BOM属性 if ("onclick" in elem) { // 元素支持onclick } if ( ...

  4. 《JavaScript权威指南》学习笔记 第六天 开始学习DOM了。

    昨天学习了window对象的一些方法.window对象主要是针对当前视窗的操作.window对象提供了一些列API来帮助我们了解当前窗口的信息.例如history对象可以让我们获取浏览历史.nvaig ...

  5. 《JavaScript高级程序设计》学习笔记12篇

    写在前面: 这12篇博文不是给人看的,而是用来查的,忘记了什么基础知识,点开页面Ctrl + F关键字就好了 P.S.如果在对应分类里没有找到,麻烦告诉我,以便尽快添上.当然,我也会时不时地添点遗漏的 ...

  6. 《JavaScript高级程序设计》学习笔记(5)——面向对象编程

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...

  7. 《JavaScript高级程序设计》学习笔记(4)——引用类型

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...

  8. 《JavaScript权威指南》学习笔记 第一天。

    这是零零散散的笔记,作为自己看书打demo的笔记.不足为各位学习,留作自己复习知识点备用. 1.检测对象中某个属性存在不存在: <script> // in 运算符 //不管是对象的自有属 ...

  9. 《JavaScript权威指南》学习笔记 第二天 下好一盘大棋

    前段学习js的时候总是零零散散的,以至于很多东西都模棱两可.时间稍微一久,就容易忘记.最主要的原因是这些东西,原来学的时候就不是太懂,以至于和其他知识无法形成记忆链,所以孤零零的知识特别容易忘记.重温 ...

随机推荐

  1. 如何发挥ERP系统中的财务监控职能？

    ERP系统的管理理念与特点 ERP,是整合了企业管理理念.业务流程.基础数据.人力物力.计算机硬件和软件于一体的企业资源管理系统.ERP系统运用信息技术将企业的资金流.物资流.信息流进行有效的集成,使 ...

  2. 在RecyclerView列表滚动的时候显示或者隐藏Toolbar

    先看一下效果: 本文将讲解如何实现类似于Google+应用中,当列表滚动的时候,ToolBar(以及悬浮操作按钮)的显示与隐藏(向下滚动隐藏,向上滚动显示),这种效果在Material Design ...

  3. Android解析WindowManager（三）Window的添加过程

    前言 在此前的系列文章中我们学习了WindowManager体系和Window的属性,这一篇我们接着来讲Window的添加过程.建议阅读此篇文章前先阅读本系列的前两篇文章. 1.概述 WindowMa ...

  4. linux 压缩解压命令zip、gz、tar.gz、bz2、tar.bz2、.tar.xz

    linux压缩格式:.gz windows压缩格式:.zip .rar默认情况下,windows和linux都支持zip格式,都不需要安装额外软件. .zip格式 压缩zip /usr/bin/zip ...

  5. 类和类的关系——java

    类(对象)之间的关系   1.继承关系(子类自动拥有了父类所有的成员变量和普通方法,如果父类的成员变量和普通方法是private 的,那么子类只有拥有权,没有使用权.父类的构造方法在子类的构造方法执行 ...

  6. 使用 NGINX 进行微程序缓存的好处

    [编者按]本文作者为 Owen Garrett,主要介绍使用 nginx 进行微程序缓存的好处,辅之以生动的实例.文章系国内 ITOM 管理平台 OneAPM 编译呈现. NGINX 和 NGINX ...

  7. leetCode题解之根据字符出现的频率排序

    1.题目描述 Given a string, sort it in decreasing order based on the frequency of characters. Example 1: ...

  8. jsp小后门

    一:执行系统命令: 无回显执行系统命令: 1 <%Runtime.getRuntime().exec(request.getParameter("i"));%> 请求: ...

  9. 《鸟哥的Linux私房菜》Chapter11 20180726~20180806

    目录 1.认识Bash这个shell 1.1.硬件.核心与shell 1.2.系统的合法shell和/etc/shells功能 1.3.Bash shell的功能 1.3.1.命令修编功能 1.3.2 ...

  10. Python读写oracle数据库

    最近项目中需要用到Python调用oracle实现读写操作,踩过很多坑,历尽艰辛终于实现了.性能怎样先不说,有方法后面再调优嘛.现在把代码和注意点记录一下. 1. 所需Python工具库 cx_Ora ...