<!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. ENVI对一种WGS84投影不支持的情况说明

    作者:朱金灿 来源:http://blog.csdn.net/clever101 假如wkt字符串这样描述WGS84投影: GEOGCS["GCS_WGS_1984",DATUM[ ...

  2. 安装部署 OpenPAI Install OpenPAI on Ubuntu

      介绍 不管是机器学习的老手,还是入门的新人,都应该装备上尽可能强大的算力.除此之外,还要压榨出硬件的所有潜力来加快模型训练.OpenPAI作为GPU管理的利器,不管是一块GPU,还是上千块GPU, ...

  3. maven 项目目录图与web 应用结构图对比

    web应用结构图 -war | | | |++++META-INF | | |----WEB-INF | | |-classes | | |com/baidu/controller/Controlle ...

  4. sql 内连接 子查询 合并查询

    -- 内连接:-- 显示员工姓名.工资和公司所在地 select e.ename, e.sal, d.dname from emp e,dept d; -- 笛卡尔积 select e.ename, ...

  5. java 内存分析之static

    源码: 内存分析: 源码: 静态方法:   用static 声明的方法为静态方法,在调用该方法时,不会将对象的引用传递给它,所以在static 方法中不可访问非static 的成员.   可以通过对象 ...

  6. java基础(十) 数组类型

    1. 数组类简介   在java中,数组也是一种引用类型,即是一种类. 我们来看一个例子,理解一下数组类: public static void main(String[] args) { Class ...

  7. 整理JavaScript循环数组和对象的方法

    众所周知,常用的循环语句有for.while.do-while.for-in,forEach以及jQuery中提供的循环的方法:以及ES6中提供的很多用来循环对象的方法如map, 在 Javascri ...

  8. LeetCode题解之Unique Morse Code Words

    1.题目描述 2.题目分析 将words 中的每一个string  直接翻译成对应的Morse 码,然后将其放入 set 中,最后返回set的大小即可,此处利用的set 中元素不重复的性质. 3.代码 ...

  9. leetCode题解之Reshape the Matrix

    1.题目描述 2.分析 使用了一个队列. 3.代码 vector<vector<int>> matrixReshape(vector<vector<int>& ...

  10. 用UITextView加载rtfd文件

    用UITextView加载rtfd文件 效果 说明 使用此方法可以实现十分简易的富文本显示效果,包括图文混排等等效果. 源码 // // ViewController.m // Rtfd // // ...