1.定义一个div，宽度为100px,高度为100px,背景色为粉色。

定义一个事件，鼠标移入时背景色变为蓝色,宽度变为200px.

定义一个事件，鼠标移出时背景色变为红色。

html文件：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title></title>

    <link href="StyleSheet.css" rel="stylesheet" />

</head>

<body>

<div class="div1" id="dd1"></div>

</body>

</html>

 <script type="text/javascript">

     var obt = document.getElementById('dd1');

     //鼠标移入事件

     obt.onmouseover = function ()

     {

         obt.style.backgroundColor = "blue";
         obt.style.width="200px";

     }

     //鼠标移除事件

     obt.onmouseout = function () {

         obt.style.backgroundColor = "red";

     }

</script>

CSS文件：

.div1 {

width:100px;

height:100px;

background-color:pink;

}

1.定义5个div，宽度为100px,高度为100px,背景色为粉色。

定义一个事件，鼠标移入时背景色变为蓝色,宽度变为200px.

定义一个事件，鼠标移出时背景色变为红色,宽度变为100px.

HTML文件：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title></title>

    <link href="StyleSheet.css" rel="stylesheet" />

</head>

<body>

    <div class="div1" id="dd1"></div>

    <div class="div1" id="Div11"></div>

    <div class="div1" id="Div2"></div>

    <div class="div1" id="Div3"></div>

    <div class="div1" id="Div4"></div>

</body>

</html>

<script type="text/javascript">

    var obt = document.getElementsByClassName('div1');

    //鼠标移入事件

    for (var i = ; i < obt.length; i++) {

        obt[i].onmouseover = function () {

            this.style.backgroundColor = "blue";

            this.style.width = "150px";

        }

    }

    //鼠标移除事件

    for (var i = ; i < obt.length; i++) {

        obt[i].onmouseout = function () {

            this.style.backgroundColor = "red";

            this.style.width = "100px";

        }

    }

</script>

CSS文件：

.div1 {

width:100px;

height:100px;

background-color:pink;

float:left;

margin-right:10px;

}

1.定义5个div，宽度为100px,高度为100px,背景色为粉色。

定义一个事件，鼠标移入时背景色变为蓝色,宽度变为200px.

定义一个事件，鼠标移出时背景色变为红色,宽度变为100px.

点击变为黑色，且同一时间只能有一个div是黑色。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title></title>

    <link href="StyleSheet.css" rel="stylesheet" />

</head>

<body>

    <div class="div1">

        <div class="div111"></div>

    </div>

      <div class="div1">

        <div class="div111"></div>

    </div>

      <div class="div1">

        <div class="div111"></div>

    </div>

      <div class="div1">

        <div class="div111"></div>

    </div>

      <div class="div1">

        <div class="div111"></div>

    </div>

      <div class="div1">

        <div class="div111"></div>

    </div>

    <div class="div222"></div>

    <div class="div222"></div>

    <div class="div222"></div>

    <div class="div222"></div>

    <div class="div222"></div>

    <div class="div222"></div>

</body>

</html>

<script type="text/javascript">

    var obt = document.getElementsByClassName("div1");

    var obt1 = document.getElementsByClassName("div111");

    for (var i = ; i < obt.length; i++) {

        //点击事件

        obt[i].onclick = function () {

            //

            for (var j = ; j < obt.length; j++) {

                    obt[j].style.backgroundColor = "pink";

                }

            this.style.backgroundColor = "black";

        }

        //鼠标移入事件

        obt[i].onmouseover = function () {

            //如果移入的div背景颜色不是黑色，则变成灰色

            if( this.style.backgroundColor != "black")

            this.style.backgroundColor = "gray";

        }

        //鼠标移除事件

        obt[i].onmouseout = function () {

           //如果移除的div背景颜色为灰色，则变成粉色

            if (this.style.backgroundColor=="gray")

            this.style.backgroundColor = "pink";

        }

    }

</script>

JS——控制标记的样式的更多相关文章

  1. 用JS控制CSS基本样式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...

  2. js 控制标记样式

    做一个变色的标签 鼠标移入变为灰色,移除变回原来的颜色,点击变成黑色,再点击变回,如果变成黑色不受移入移除影响. <body> <div class="bt1" ...

  3. js控制伪元素样式

    //获取伪元素// CSS代码 #myId:before { content: "hello world!"; display: block; width: 100px; heig ...

  4. JS 操作对象 事件 样式

    1.获取标记对象 css 1 - class 2 - id 3 - 标记选择器 js 1 - class 2 - id 3 - 标记 4 - name + document.getElementByI ...

  5. js控制不同的时间段显示不同的css样式

    js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){        datetoday ...

  6. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  7. 内联样式自动出现，一般是js控制写入的

    内联样式自动出现,一般是js控制写入的

  8. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  9. js 控制展开折叠 div html dom

    js 控制展开折叠 div    html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...

随机推荐

  1. Ubuntu纯字符界面的一些设置

    由于Ubuntu的纯字符界面不支持中文显示,所以进行了一些配置,为了更好的显示 1. 把环境语言配置为英文 在用户目录下的".bashrc"文件的结尾处添加以下内容,然后重新登录 ...

  2. android学习2——RelativeLayout

    相对布局管理器,一个View的位置是相对于另外一个View定义的. <?xml version="1.0" encoding="utf-8"?> & ...

  3. [译]如何在Web开发中使用Python

    [译]如何在Web开发中使用Python 原文:HOWTO Use Python in the Web 摘要 这篇文档展示了Python如何融入到web中.它介绍了几种Python结合web服务器的方 ...

  4. 网站Web业务架构从小到大演变

    有一天,我突发奇想创建了一个站点,基于 LNMP 架构,起初只有我自己访问,后来因为我点儿正,访问量越来越大,所以最终导致下面的架构演变. 1.单台机器 单台机器因为只是一个小站,访问量一天也没有多少 ...

  5. 配置apache

    1. 修改httpd.conf文件 # vi  /usr/local/apache/conf/httpd.conf 1) 设置根目录的路径 根目录是指Apache存放配置文件和日志文件的目录,配置参数 ...

  6. 了解 : EDM

    EDM是 Entity Data Meta,首先先了解什么是Entity. Entity 它是一个框架,在C#使用,方便调用SQL data的,和Odata 调用有关.细节我不清楚! EDM 基本是表 ...

  7. 每天一个linux命令(29)--Linux chmod命令

    chmod 命令用于改变Linux 系统文件或目录的访问权限.用它控制文件或目录的访问权限.该命令有两种用法.一种是包含字母和操作符表达式的文字设定法:另一种是包含数字的数字设定法. Linux系统中 ...

  8. 关于zepto在chrome中触发两次的解决方案

    复现条件:chrome 55+ 1.zepto tap的实现及double fire的原因 在监听DOM根节点的时候,touchStart后通过XY的坐标偏差,与tapTime的计时判断Tap/Lon ...

  9. 在.NET Core 上运行的 WordPress

    在.NET Core 上运行的 WordPress,无需安装PHP既可跨平台运行WordPress. 在Peachpie中实现PHP所需的功能数月后,现在终于可以运行一个真实的应用程序:WordPre ...

  10. 数据库-增删改查操作SQL实现

    一.数据插入-Insert 1. 插入单条记录 insert into 表名(字段名,字段名,字段名) //当插入所有字段时,字段名可以省略 values('值1','值2','值3'); 2. 插入 ...