JS——控制标记的样式
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——控制标记的样式的更多相关文章
- 用JS控制CSS基本样式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...
- js 控制标记样式
做一个变色的标签 鼠标移入变为灰色,移除变回原来的颜色,点击变成黑色,再点击变回,如果变成黑色不受移入移除影响. <body> <div class="bt1" ...
- js控制伪元素样式
//获取伪元素// CSS代码 #myId:before { content: "hello world!"; display: block; width: 100px; heig ...
- JS 操作对象 事件 样式
1.获取标记对象 css 1 - class 2 - id 3 - 标记选择器 js 1 - class 2 - id 3 - 标记 4 - name + document.getElementByI ...
- js控制不同的时间段显示不同的css样式
js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){ datetoday ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- 内联样式自动出现，一般是js控制写入的
内联样式自动出现,一般是js控制写入的
- js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- js 控制展开折叠 div html dom
js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
随机推荐
- Android Asynctask的优缺点
导语:之前做习惯了Framework层的开发,今天在武汉斗鱼公司面试APP客户端的开发,其中一道题是讲述Asynctask的优缺点,我靠,我只是知道有这么一个东西,会用而已,看来之前的生活太过于安逸, ...
- cin的返回值
例: int main() { int a,b; while(cin >> a >> b) cout << a+b << endl; } 首先,cin是 ...
- iOS 快速集成启动页广告
前言 由于项目中要用到启动页广告,所以做了简单的研究,同时借鉴网易新闻和蘑菇街的交互写了一个简单的demo,现在写出来供大家参考,可能由于个人局限会有一些bug和不完善的地方,也希望大家能够友善提醒和 ...
- SecureCRT文件传输模式
前言 如下图所示,SecureCRT6.5.0 有4种文件传输模式. 1)ASCII:最快的传输模式,但只能传文本 2)Xmodem:非常古老的传输协议速度较慢,但由于使用了CRC错误侦测方法,传输的 ...
- SQLHELPER 帮助类
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- JS完成页面跳转并传参的方法|附加：循环遍历对象
此方法只能传递较少参数 方法如下: <a href='page/index.html'>跳转</a> 以上是正常写法,如果要传参按一下写法: <!--参数写在?后面,多个 ...
- 每天一个linux命令(42)--traceroute命令
通过traceroute 我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不 ...
- MySQL两种引擎的区别
Innodb引擎 Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别.该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统,它本身其实就是基于MySQL ...
- 手把手教你webpack、react和node.js环境配置（上篇）
很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...
- SmartRoute之大规模消息转发集群实现
消息转发的应用场景在现实中的应用非常普遍,我们常用的IM工具也是其中之一:现有很多云平台也提供了这种基础服务,可以让APP更容易集成相关功能而不必投入相应的开发成本.对于实现这样一个简单功能并不复杂, ...