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" ...
随机推荐
- java 文件操作 读取txt文本（兄弟常开心）
测试一下读取文本的另一种方法:该方法只使用一个类读取了文件 注意:buffer和read方法中读取指定长度的一致 package com.swust; import java.io.*; /* * 数 ...
- 做一个360度看车的效果玩玩（web）
前几天在 Lexus 官网看到有这样的一个效果:http://www.lexus.com.cn/models/es/360 于是顺手打开控制台看了下他们是怎么做的,发现使用的技术还是比较简单的,通过背 ...
- Java String类和Object类
String类: 方法: 1.charAt(int index):取index下标的char类型值 2.endsWith(String prefix) /startsWith(String prefi ...
- css特殊字符编码
- masm32V11配置
本文写给学汇编语言程序设计刚起步的吧友.适用Windows操作系统.已入门的吧友请绕道. (1)masm32开发包的下载 要用汇编语言编程,首先得有个开发工具,汇编语言开发工具有多种,但本文仅介绍ma ...
- 前端总结·基础篇·CSS（二）视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- UCOSII时间任务块
转:http://blog.csdn.net/wchp314/article/details/5416476 uCOS-II的任务控制块 标签: uCOS-II 2009-12-01 14:45 ...
- Mysql删除表格之后，进行恢复
一:存在在PHPmyAdmin下找到表格导出然后再导入 二:当没有备份时,使用binlog功能进行恢复 先进入到/etc/my.cnf文件中. 在文件中添加一句:log-bin=mysql-bin 然 ...
- 关于echarts的一些基本使用demo
最近发现一个很好用的一个前端控件echarts,效果非常不错,兼容ie8+以上等主流浏览器.可以使用它制作报表,地图示意图等,可用其实现一系列强大的功能. 其基于html5 Canvas,是一个纯Ja ...
- 每天一个linux命令(41)--ping命令
Linux系统的 ping 命令是常用的网络命令,它通常用来测试与目标主机的连通性,它通过发送 ICMP ECHO_REQUEST数据包到网络主机(send ICMP ECHO_REQUEST t ...