<!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. Ubuntu中利用rename批量重命名

    1．简介: 通常在机器视觉的学习过程中,需要批量处理一些图片,通常会涉及到批量重命名的问题,可以利用rename命令快速实现图片的批量重命名 2.rename命令格式: rename [-v] [-n ...

  2. 【node】用koa搭建一个增删改服务（一）

    前文,vue分类里有一个日志demo的练习,这篇文章就是介绍针对日志demo的服务是怎么写的 一.koa搭建项目 1. npm init 2. npm install koa 二.建数据库 下面是项目 ...

  3. Hadoop总结

    背景 Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储. Mapreduce1 vs YA ...

  4. 网络 私有IP和子网掩码设置

    私有IP不需要花钱 节约使用公网IP有两个方法,一个方法是动态IP(关机回收IP),一个方法是私有IP,尤其是私有IP作用巨大. 私有IP不具有唯一性,不能直接访问公网.比如,我以私有IP192.16 ...

  5. linux 权限管理命令chown、chgrp、umask、linux新建文件或目录的默认权限755

    chown /bin/chownchown [用户] [文件或目录] 改变文件或目录的所有者只有root可以改变文件或目录的所有者 root用户:mkdir /tmptouch /tmp/test.f ...

  6. Axure中移动端原型设计方法（附IPhoneX和IPhone8最新模板）

    Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新 ...

  7. SqlServer横向扩展负载均衡终极利器SqlServerProxy 不限功能永久免费

    一直以来,MySQL因为开源,诞生了很多扩展方案,类似Amoeba.Atlas.Cobar.MySQLProxy等,大都基于MySQL通信协议来定制解决方案,让我们很羡慕嫉妒,但没办法,Microso ...

  8. Prometheus Node_exporter 之 Basic Net / Disk Info

    1. Network Traffic Basic 每个接口的基本网络信息 type: GraphUnit: bytesrecv {{device}} 各个网络接口的下载量 recv lo: 本地环回接 ...

  9. 【Redis】命令学习笔记——键(key)（20个超全字典版）

    安装完redis和redis-desktop-manager后,开始学习命令啦!本篇基于redis 4.0.11版本,从对键(key)开始挖坑! 准备工作,使用db1(默认db0,由于之前练习用db0 ...

  10. asp.net中的<%%>的使用

    在asp.net中常见的<%%>方式有如下几种: <%%>.<%=%>.<%:%>.<%#%>.<%$%>.<%@%> ...