直接上代码：

<!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. Luogu P1282 多米诺骨牌 DP。。背包？

    背包...差不多..QWQ 设f[i]为达到差值为i的状态需要多少次,那就很显然了: 注意区分正负不同的代价的循环方向 技巧:如果不想改负数的话,那可以移动一下数组下标,用一个新的指针指向原来的数组 ...

  2. 解决页面使用overflow: scroll，overflow-y:hidden在iOS上滑动卡顿的问题

    解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...

  3. 网站ico那点事儿

    一. 如何获取某个网站的favicon.ico http://moco.imooc.com/player/report.html 今天看到这个网站上,左侧的小图片挺好看的,想弄下来,检查源码,也没有看 ...

  4. RBAC基于角色的权限访问控制

      RBAC是什么,能解决什么难题?ThinkPHP中RBAC实现体系安全拦截器认证管理器访问决策管理运行身份管理器ThinkPHP中RBAC认证流程权限管理的具体实现过程RBAC相关的数据库介绍Th ...

  5. 【CAD】创建多行文本

    下面为OBJECT-ARX创建多行文本的代码,记录 McDbMText* Mx::AddMText(IN McDbBlockTableRecord* pBlkRec, IN LPCTSTR pszCo ...

  6. 【原】shell编写一个简单的jmeter自动化压测脚本

    在公司做压力测试也挺长时间了,每次测试前环境数据准备都需要话费较长时间,所以一直在考虑能不能将整个过程实现自动化进行,于是就抽空写了一个自动化脚本,当然这个脚本目前功能十分简陋,代码也不完善,很有很多 ...

  7. URAL —— 1255 & HDU 5100——Chessboard ——————【数学规律】

    用 k × 1 的矩形覆盖 n × n 的正方形棋盘 用 k × 1 的小矩形覆盖一个 n × n 的正方形棋盘,往往不能实现完全覆盖(比如,有时候 n × n 甚至根本就不是 k 的整倍数). 解题 ...

  8. C++程序设计基础（3）条件语句和循环语句

    注:读<程序员面试笔记>笔记总结 1.知识点 1.1条件语句 (1)if……:(2)if……else……:(3)if……else if……:(4)switch(){case ():brea ...

  9. Python远程连接Windows，并调用Windows命令（类似于paramiko）

    import winrm win2012 = winrm.Session(')) r = win2012.run_cmd('D: &' ' cd python &' ' type s. ...

  10. js获取当前日期，格式为YYYY-MM-DD

    //获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = "-& ...