<!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. dnspod域名解析设置

    time: 2016-01-8 10:30     因为我的博客是用Github page搭建的,所以要把域名和Github_name.github.io的URL联系起来.本人实在小白一个,就纪录一下 ...

  2. Session、Cookie简单理解

    Session: session是一种记录客户状态的机制,session是保存在服务器上的,当浏览器访问服务器的时候,服务器把客户端信息以某种形式记录在服务器上,这就是所谓的session,当浏览器再 ...

  3. redis 持久化策略、aof配置、测试、手动持久化、aof文件体积优化

    redis持久化策略 1.数据文件.rdb 2.更新日志.aof 设置aof 1.命令方式config set appendonly noconfig rewrite2.配置文件方式 redis持久化 ...

  4. paramiko的安装与使用

    paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接,支持在远程登录服务器执行命令和上传下载文件的功能. 安装 pycrypto下载地址: ...

  5. SQL Server ->> 使用CROSS APPLY语句是遇到聚合函数中包含外部引用列时报错

    本次遇到的问题是CROSS APPLY的内部查询语句中的聚合函数包含CASE WHEN判断,且同时又内部语句的表的列和外部引用的表的列,此时会报下列的错误. 消息 8124,级别 16,状态 1,第 ...

  6. asp.net --- Menu控件\CSS 和样式

    几乎 Menu 控件外观的各个方面都可以使用 Menu 控件的属性或级联样式表 (CSS) 来管理.通过了解哪些属性控制呈现的哪些方面,可以定制菜单的外观.本主题介绍由 Menu 控件公开的样式类型, ...

  7. Asp.net单点登录解决方案

    原文出处:http://www.cnblogs.com/wu-jian 主站:Passport集中验证服务器,DEMO中为:http://www.passport.com/ 分站:http://www ...

  8. 如何在ScrollView滑动的瞬间禁用拖拽手势

    如何在ScrollView滑动的瞬间禁用拖拽手势 效果: 在UIScrollView滑动的瞬间禁用pan手势,可以防止用户按着屏幕不放后导致出现的一些莫须有的bug. // // ViewContro ...

  9. Windows与Linux 互相访问，挂载过程

    开始使用Linux时浏览器无法访问,多次尝试以失败告终,果断放弃自我动手, 找了大神帮助,弄了半天终于可以访问.但是之前在Windows下的文件也不能放弃,从大神那里那里文档,然后进行尝试 1.在Wi ...

  10. Spring Boot+MyBabits静态连接多个数据库

    1.修改.properties first.datasource.jdbc-url=jdbc:mysql://localhost/forwind first.datasource.username=r ...