js对样式的操作
2024-08-21 12:28:53
本文有:对某个事件的来回操作实现对css样式的来回修改 。比如实现hover效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">魔降风云变</div>
<script type="text/javascript">
// 1.获取事件源对象
// var box = document.getElementById('box'); // 2.绑定事件
/* box.onmouseover = function (){
// 3.让标签的背景色变绿 box.style.backgroundColor = 'green';
box.style.fontSize = '30px'; }
box.onmouseout = function (){
// 3.让标签的背景色变绿 box.style.backgroundColor = 'red';
box.style.fontSize = '16px'; } */
// var isRed = true;
// box.onclick = function(){
// if(isRed){
// this.style.backgroundColor = 'green';
// isRed = false;
// }else{
// this.style.backgroundColor = 'red';
// isRed = true;
// } // } </script>
</body>
</html>
1、
1.1
没有js的时候
1.2
// 1.获取事件源对象
var box = document.getElementById('box'); // 2.绑定事件
box.onmouseover = function (){
// 3.让标签的背景色变绿 box.style.backgroundColor = 'green';
box.style.fontSize = '30px'; }
鼠标经过图,让图变绿,字体变大。使用js修改css样式
1)获取事件源,事件源就是要修改css的标签代码段;
2)绑定事件 对象.onmouseover =function(){} 匿名函数。
3)匿名函数中对象.样式.属性=‘新值’ ,修改颜色和字体。属性带-的去掉-并将-后第一个字母大写。驼峰体。
上面的改变就回不去了,只有刷新网页才能变回原来的样子。
1.3、两段代码js实现伪类选择器hover的效果
// 1.获取事件源对象
var box = document.getElementById('box'); // 2.绑定事件
box.onmouseover = function (){
// 3.让标签的背景色变绿 box.style.backgroundColor = 'green';
box.style.fontSize = '30px'; }
box.onmouseout = function (){
// 3.让标签的背景色变绿 box.style.backgroundColor = 'red';
box.style.fontSize = '16px'; }
鼠标未覆盖
鼠标覆盖,能实现不断的切换了。
1.4、但是这里有代码冗余。修改一下,加个标志,
var box = document.getElementById('box');
var isRed = true;
box.onclick = function(){
if(isRed){
this.style.backgroundColor = 'green';
isRed = false;
}else{
this.style.backgroundColor = 'red';
isRed = true;
} }
未点击:
点击。能实现每次点击实现颜色切换
最新文章
- iOS开发 - OC - PCH文件使用
- 使用CSS和jQuery实现tab页
- Hadoop科普文——常见的45个问题解答(CSDN)
- 关于null == 0?返回false的问题
- 四.CSS声明
- C#算法基础之希尔排序
- Windows2008安装IIS方法
- php操作Memcache示例
- sql 语句总结
- ContextLoaderListener和Spring MVC中的DispatcherServlet加载内容的区别
- n++与++n的区别
- 20162330 实验二 《Java面向对象程序设计》 实验报告
- python读取excel时,数字自动转化为float
- FileInputStream与BufferedInputStream的对比
- 常见的网页图像格式有 ico、jpg、png、gif,说说他们各自的应用场景
- 快速删除C#代码中的空白行
- js注入攻击
- 使用命令行执行jmeter的方法
- PHP删除当前目录及其目录下的所有文件
- 【BZOJ】3123: [Sdoi2013]森林