直接上代码：

<!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. 在windows10下vs2017配置opencv4.0.0

    第一次配置时,有些.dll文件出错,所以用重新下载opencv配置了一遍,终于可以了,喜极而泣! 一.下载OpenCV4.0 直接到官网https://opencv.org/下载 然后在下个页面选择 ...

  2. Codeforces - 570D 离散DFS序 特殊的子树统计 (暴力出奇迹)

    题意:给定一棵树,树上每个节点有对应的字符,多次询问在\(u\)子树的深度为\(d\)的所有节点上的字符任意组合能否凑成一个回文串 把dfs序存储在一个二维线性表中,一个维度记录字符另一个维度记录深度 ...

  3. HihoCoder - 1044 状压DP 初步

    本题主要难在状态的转移 定义\(dp[i][j]:\)前\(i\)个中\(j\)集合范围内的最优解 \(j\)定义为\(p_1,p_2,...,p_{m-1}\),若第\(i-j+1\)个选定,则\( ...

  4. 用Verilog语言设计一个3-8译码器

    case语句 if_case语句 源码下载 Github >>

  5. python 生成嵌套字典

    import collections import json tree=lambda:collections.defaultdict(tree) some_dict=tree() some_dict[ ...

  6. How to Setup a Private Proxy Server on EC2 in Under 10 Minutes

    How to Setup a Private Proxy Server on EC2 in Under 10 Minutes I’ve been slacking a bit with regular ...

  7. 常用css搜集

    div居中显示 position: fixed; top: 130px; left:0px;right:0px;margin-left:auto;margin-right:auto;

  8. pat1004. Counting Leaves (30)

    1004. Counting Leaves (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A fam ...

  9. Windows 10 下彻底关闭 Hyper-V 服务

    由于最近需要用到VMWare Workstation 安装虚拟机,安装完成后,发现任何64位的系统都不能正常安装.可能是Hyper-V与VMWare Workstation的冲突造成的不兼容,所以就去 ...

  10. 数据库SQL优化百万级数据库优化方案

    1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...