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" ...
随机推荐
- PLSQL程序流程
IF语句结构: if(条件表达式)- -then- -执行语句;- -end; IF-THEN-ELSE语句结构: if(条件表达式)- -then- -执行语句;- -else- -执行语句;- e ...
- JS冒号的作用
JS中冒号的作用1.声明对象的成员2.switch语句分支3.三元表达式 1.声明对象的成员 var Book = { Name: '法', Price: 100, Discount : functi ...
- 使用阿里云的Maven仓库加速Spark编译过程
前言 在国内编译Spark项目需要从Maven源下载很多依赖包,官方源在国内大环境下的下载速度大家都懂得,那个煎熬啊,简直是浪费生命. 如果你的下载速度很快,你现在就可以无视这篇文章了. 阿里云给国内 ...
- Monit：开源服务器监控工具
Monit是一个跨平台的用来监控Unix/linux系统(比如Linux.BSD.OSX.Solaris)的工具.Monit特别易于安装,而且非常轻量级(只有500KB大小),并且不依赖任何第三方程序 ...
- Java Collection 接口、Set 接口、List 接口基本操作 练习
//////// One package Chp11; import java.util.ArrayList; import java.util.List; public class TestList ...
- IntelliJ IDEA 2016.1.4 git 切换分支详解
参考网址: http://cache.baiducontent.com/c?m=9d78d513d9981de90fb3ca255501d7174202d7743da7c7647ac3e54a8414 ...
- java 计算源码的行数
import java.io.BufferedReader;import java.io.File;import java.io.FileReader;import java.io.IOExcepti ...
- 剑指offer编程题Java实现——面试题6重建二叉树
题目: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2, ...
- 无向图的完美消除序列 判断弦图 ZOJ 1015 Fish net
ZOJ1015 题意简述:给定一个无向图,判断是否存在一个长度大于3的环路,且其上没有弦(连接环上不同两点的边且不在环上). 命题等价于该图是否存在完美消除序列. 所谓完美消除序列:在 vi,v ...
- mfc--弹出文件夹对话框
1. HRESULT CoInitializeEx(void* pvReserved,DWORD dwCoInit) 初始化com组件,传递参数COINIT_APARTMENTTHREADED 2.L ...