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" ...
随机推荐
- 用keychain这个特点来保存设备唯一标识。
由于IOS系统存储的数据都是在sandBox里面,一旦删除App,sandBox也不复存在.好在有一个例外,那就是keychain(钥匙串). 通常情况下,IOS系统用NSUserDefaults存储 ...
- ReentrantLock实现原理
以下是本篇文章的大纲 1 synchronized和lock 1.1 synchronized的局限性 1.2 Lock简介 2 AQS 3 lock()与unlock()实现原理 3.1 基础知识 ...
- JavaScript null 和 undefined
null null 表示一个变量被声明了,并被赋值为空 var lzh = null; console.log(lzh); // null console.log(typeof lzh); // ob ...
- wpf中子窗口的几个问题
今天研究了一下wpf中的窗口,写这篇文章来总结一下今天的收获.(转载请注明出处~) 总所周知,窗口是windows系统中十分重要的一个元素(从名字上就能体现出来),而一个应用程序总是包含很多窗口(主窗 ...
- Oracle索引语句整理
转载:http://www.cnblogs.com/djcsch2001/articles/1823459.html 索引,索引的建立.修改.删除 索引索引是关系数据库中用于存放每一条记录的一种对象, ...
- Python求解进制问题（阿里巴巴2015笔试题）
问题描述:用十进制计算30的阶乘,然后把结果转换成三进制表示,那么该进制表示的结果末尾会有多少个连续0?解析:作为笔试题的话,要想按照题意先把阶乘结果计算出来再转换成三进制最后再数0的个数,时间肯定来 ...
- 如何用js实现自适应，原来只是几行代码的事(╯‵□′)╯︵┻━┻
在javascript写下如下几行: (function (doc, win, undefined) { var docEl = doc.documentElement, ...
- ios用户体验
如果转载此文,请注明出处:http://blog.csdn.net/paulery2012/article/details/25157347,谢谢! 前言: 本文是在阅读<ios用户体验> ...
- python的解释器spython介绍
Python解释器spython介绍 简介 出于个人爱好和某种需求,我再16年对python的解释器产生了浓厚兴趣,并且下定决心重新实现一个版本.我个人再游戏服务器开发中,对c++嵌入lua和pyth ...
- angular : direative : scope | 指令scope里的符号@，=
先看看以下的代码 <body ng-app="app" ng-controller="ctrl"> <dir myname="nam ...