JS——控制标记的样式

时间：2022-03-01 14:51:53

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&quot ...

随机推荐

  1. Java中long类型直接赋值大数字 注意事项

    在java中,我们都知道有八种基本数据类型:byte. char. short .int. long. float. double .boolean 下面列出以下四种数据类型及其取值范围: 本文主要讲 ...

  2. Orion Network Performance Monitor 软件在网络管理中的应用

    Orion Network Performance Monitor 软件在网络管理中的应用       Orion Network Performance Monitor是完全的带宽性能和故障管理软件 ...

  3. HDU4612 Warm up 边双连通分量&amp&semi;&amp&semi;桥&amp&semi;&amp&semi;树直径

    题目的意思很简单,给你一个已经连通的无向图,我们知道,图上不同的边连通分量之间有一定数量的桥,题目要求的就是要你再在这个图上加一条边,使得图的桥数目减到最少. 首先要做的就是找出桥,以及每个点所各自代 ...

  4. 树型动态规划（树形dp）

    树型动态规划就是在“树”的数据结构上的动态规划,树型动态规划是建立在树上的,所以有二个方向: 1．根—>叶:这种题目基本上碰不到 2．叶->根:根的子节点传递有用的信息给根,完后根得出最优 ...

  5. Druid连接池配置&lpar;java无框架&rpar;

    连接池是一个对数据库连接进行管理的东西,当一个线程需要用 JDBC 对 数据库操作时,它从池中请求一个连接.当这个线程使用完了这个连接,将它返回到连接池中,这样这就可以被其它想使用它的线程使用,而不是 ...

  6. 自定义组件-BreadcrumbTreeView 的使用

    一.问题概述 树形结构是开发中常用的一种组织数据的结构,不少平台也提供了对应的控件.而在android平台中,出于使用手指操作树形结构不是很方便的原因,并没有提供树形结构控件.但在实际应用中,不可避免 ...

  7. QUARTZ系列之二-监听器

    Listener 1.是什么: perform actions based on events occurring within the scheduler. 2.分类:a.TriggerListen ...

  8. &lbrack;转&rsqb;微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）

    本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: ...

  9. MPVUE多环境定义后台URL

    小程序选定了mpvue作为开发框架,搭建开发环境和构建环境.自从用了Travis和Jenkins之后,再也回不到手工构建的时代了. 目的-自动构建 web项目中,自从前后台分离的结构形成,就形成了一个 ...

  10. LINUX的DNS设置【转】

    网卡DNS设置 用windos系统大家都知道,本地连接里面有一个DNS设置. 那么这个选项对应Linux系统的话就是在网卡配置文件,通过编辑vi  /etc/sysconfig/network-scr ...

相关文章