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" ...
随机推荐
- python之列表对象
1. 获取列表中的某个值 描述:获取下标所对应的值 语法: print(li[0]) #[取索引值] 样例: li = list(['a','b','c']) val=(li[0]) #获取下标所对应 ...
- SUI Mobile
<header class="bar bar-nav"> <h1 class='title'>只有图标的表单</h1> </header& ...
- 【转】IntelliJ IDEA2016.1 + maven 创建java web 项目
最近开始使用idea 来写java项目了,这个很流行,相比Eclipse方便了很多.功能多了,相对应的使用的复杂度也较高了,因为网上很多的使用和创建项目的简单教程,都是基于老版本的,每个新版本都有不一 ...
- 微信小程序 网络请求之设置合法域名
设置域名 登录微信公众号后台小程序中 设置→开发设置→服务器设置 必须设置域名,微信小程序才能进行网络通讯,不然会报错 如果设置好了合法域名,开发工具还提示不在合法域名列表中,因为在微信会有一段时间的 ...
- Delphi中TApplication详解
转自:http://blog.sina.com.cn/s/blog_4d6f55d90100bmv9.html TApplication是用于Delphi应用程序的类型,该类在单元forms中声明.T ...
- 【openstack N版】——可视化服务horizon
一． openstack可视化服务horizon 1.1dashboard介绍 仪表盘依赖于功能核心服务,包括身份,图像服务,计算和网络两种(neutron)或传统网络(nova-neutron)与独 ...
- 规范 : angular ui router path & params
在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...
- 部署lamp
- nodeJS中读写文件方法的区别
导言:nodejs中所有与文件相关的操作都在fs模块中,而读写操作又是我们会经常用到的操作,nodejs的fs模块针对读操作为我们提供了readFile,read, createReadStream三 ...
- webpack 引用 jquery + bootstrap 报错解决
webpack 引用 jquery + bootstrap , error : jQuery is not defind 在webpack.dev.conf.js plugins[] 加入 new w ...