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. asp.net core mvc剖析：路由

    在mvc框架中,任何一个动作请求都会被映射到具体控制器中的方法上,那框架是如何完成这样一个过程的,现在我们就来简单分析下流程. 我们紧跟上面的主题,任何一个请求都会交给处理管道进行处理,那mvc处理的 ...

  2. JSON - Qt 对 JSON的处理

    1.关于JSON的介绍参考www.json.org Qt提供处理JSON数据的支持.QJSonObject类用于封装JSON object:QJsonDocument类提供读写JSON文档的方法:QJ ...

  3. Ant学习总结3(很多的属性，用的时候方便查找)

    感谢原作者:http://blog.csdn.net/lipeijs3/article/details/5137160 一.              Ant 与 Makefile : GNU Mak ...

  4. 纪中集训 Day 8 & Last Day

    好吧回到家一直玩到现在才来写冏= = 然后今天终于在最后一场比赛中AK了= = 虽然有两人AK，另一个是初二牛ORZ 其实都是水题+模板题 第一题是DP，第二题是模拟，第三题是可持久化TREAP（其实 ...

  5. Java Web(九) 用户管理系统

    前面学习了一大堆,什么JSP,Servlet.jstl.el等等等,大多是一些死的东西,只要会其语法,知道怎么用就行了,所以做了一个小小的只有增删改查的小demo,为的就是熟悉这些知识.灵活运用起来. ...

  6. Angular.js！（附：聊聊非原生框架项目）

    最近,为了项目接触了一个很火的前端框架Angular.js,下面就Angular做一个简介吧(大牛请绕步,只针对没有接触过angular的人). Angular.js是一款精简的前端框架,如果要追溯它 ...

  7. XML与JavaScript知识

    什么是XMLHttpRequest 对象? 答:XMLHttpRequest 对象用于在后台与服务器交换数据,它是开发者的梦想,因为它能够:1.在不重新加载页面的情况下更新网页:2.在页面已加载后从服 ...

  8. 【Zookeeper】源码分析之网络通信（一）

    一.前言 前面已经分析了请求处理链中的多数类,接着继续分析Zookeeper中的网络通信模块. 二.总体框图 对于网络通信模块,其总体框图如下所示 说明: Stats,表示ServerCnxn上的统计 ...

  9. 架构师之路——里氏替换原则LSP

    定义: 如果对每一个对类型为S的对象o1,都有类型为T的对象o2,使得以T定义的所有程序P在所有的对象o1都代换成o2时,程序P的行为没有发生变化,那么类型S是类型T的子类型. 内容: 里氏替换原则通 ...

  10. 整理 - .Net系统预定义的委托们

    大部分情况下,我们可以使用系统预定义的委托类型,而不需要自己再来手动定义. 以下委托都位于System命名空间下. 传入参数.返回值的类型,大都被声明为泛型. 1.Action系列 有0-16个参数, ...