直接上代码：

<!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. 加、减、乘、除 高精度 string

    #include<stdio.h> #include<string> #include<string.h> #include<iostream> usi ...

  2. Spring 配置 Apache Commons Logging

    第一次用spring framework,刚配了个最简单的项目,启动出现如下错误,查了知道原来spring要依赖Apache common logging包.只需要添加到项目library中即可.可从 ...

  3. os.path模块

    什么是os.path模块 该模块用于处理路径,我们知道python是一门跨平台的语言,二每种操作系统,文件路径是截然不同的,为了使程序可以在不同平台生正确运行,python提供了该模块,使用该模块可以 ...

  4. 【实战】SSL和TLS漏洞验证

    工具下载:git clone https://github.com/drwetter/testssl.sh.git 实验环境:192.168.1.22(bee-box v1.6) 192.168.1. ...

  5. PIE SDK矢量数据的投影转换

    1. 功能简介 目前在地理信息领域中数据包括矢量和栅格两种数据组织形式 ,每一种数据都可以对投影进行转换,目前PIE SDK支持矢量和栅格数据的投影转换功能,下面对矢量数据的投影转换功能进行介绍. 2 ...

  6. offset、client、scroll、screen的自己理解

    body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: window.scree ...

  7. shell 脚本学习之内部变量

    一,$BASH Bash的二进制程序文件的路径 二,$BASH_ENV 这个环境变量会指向一个Bash的启动文件, 当一个脚本被调用的时候, 这个启动文件将会被读取. 三,$BASH_SUBSHELL ...

  8. win7与ubuntu双系统安装

    机器型号:联想V470 对系统引导一直不是很明白,导致我出现几次失败. 一直挺喜欢ubuntu的,因为,第一我感觉它比较友好,第二我初次接触linux就是ubuntu,当初还是同学帮助我wubi进行安 ...

  9. PowerDesigner 16.5 安装和卸载教程【含有安装文件】

    1 下载 下载地址:https://pan.baidu.com/s/1kqly0d8qU-QluEagXwh53g 密码:n1a3 下载之后目录结构如下: 2 安装教程 1 安装 1.双击安装文件,如 ...

  10. .NET平台常用框架整理

    基于.NET平台常用的框架整理   转自:http://www.cnblogs.com/hgmyz/p/5313983.html 首先谢谢楼主,以后备用 自从学习.NET以来,优雅的编程风格,极度简单 ...