直接上代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>JavaScript事件</title>

    <script>

        function changeColor()

        {            document.getElementById("test").style.background="#98F5FF";

        }

    </script>

      <style type="text/css">

        #test {

          background-color: #CD96CD;

          width: 100px;

          height: 100px;

          border-radius: 50px;

        }

      </style>

    </head>

    <body>

        <p>点击圆球，改变颜色</p>

        <div id="test" onclick="changeColor()"></div>

    </body>

</html>

如何用css将一个div设置为一个圆的更多相关文章

  1. CSS中div覆盖另一个div

    将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...

  2. 前端每日实战：116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPjWvw 可交互视频 此视频是可 ...

  3. 将一个div置于另一个div之上

    div piao置于div bg之上 <div class="bg"> <div class="piao" style="backg ...

  4. 如何用css给博客换一个好看的样式

    第一步:点击设置,将如下代码复制到页面定制css代码 h3 { color: #fff; background-color: #008eb7; -moz-border-radius: 3px; bor ...

  5. css实现div左侧突出一个带边框的三角形

    .vip-control-header{ width: 600px; height: auto; background: #F8F8F8; border: 1px solid #e2e2e2; pad ...

  6. CSS：使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  7. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  8. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  9. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

随机推荐

  1. 【算法笔记】B1016 部分A+B

    1016 部分A+B (15 分) 正整数 A 的“D​A​​(为 1 位整数)部分”定义为由 A 中所有 D​A​​ 组成的新整数 P​A​​.例如:给定 A=3862767,D​A​​=6,则 A ...

  2. 洛谷 P2577 [ZJOI2005]午餐

    这道题目比较难想. 题解: 算法:贪心+dp 容易想到贪心:吃饭慢的先打饭节约时间, 所以先将人按吃饭时间从大到小排序. 然后就是dp了: 首先,应该想到f[i][j][k]:前i个人,在1号窗口打饭 ...

  3. LeetCode902. Numbers At Most N Given Digit Set

    题目: We have a sorted set of digits D, a non-empty subset of {'1','2','3','4','5','6','7','8','9'}.  ...

  4. ZOJ - 3632 DP 单调优化

    题意:买瓜,每天的瓜有不同的价格和xu命时间,要求能苟到第n天的最小代价 定义DP方程\(dp[i]\),指苟到第\(i\)天的最小代价,所求即为\(dp[n]\) 那么怎么转移就是问题,这里的状态表 ...

  5. dedecmd 全局标签

    dedecms全局标签     dedecms 标签使用手册  全局标签   adminname|责任编辑   arclist|文档列表   arclistsg|独立单表模型列表   ask|问答标签 ...

  6. java多态的具体表现实例和理解

    Java的多态性 面向对象编程有三个特征,即封装.继承和多态. 封装隐藏了类的内部实现机制,从而可以在不影响使用者的前提下改变类的内部结构,同时保护了数据. 继承是为了重用父类代码,同时为实现多态性作 ...

  7. HDU 5316——Magician——————【线段树区间合并区间最值】

    Magician Time Limit: 18000/9000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  8. FontAwesome 图标 class="fa fa-home"

    本文转自:http://www.yeahzan.com/fa/facss.html 引用方式: class="fa fa-home" 注意:每个图标的引用都必须要添加 fa fa- ...

  9. Wpf ListView展示风格

    ListView数据绑定控件,通常是竖列展示,也可以通过改变ListView的布局来改变它的展示方式 如图展示: 主要需用修改的样式如下: <!--GridView Header样式 去除Gri ...

  10. Html-知识总结

    1.Html概述 1.1什么是Html Html:超文本标记语言(hyperText Markup Language) “超文本”加上指页面内可以包含图片,链接等非文字内容. “标记”就是使用标签的方 ...