使用JQ来回切换样式的三种方法

方法一：使用JQ添加和删除相应样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>div{height: 600px;width: 300px;background-color: orange;}.a{background-color: blue;}</style><title>Title</title><script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">sakdas
</div>
</body>
<script>$('#d').mouseover(function () {$(this).addClass('a')}).mouseout(function () {$(this).removeClass('a')})
</script>
</html>

方法二：使用toggleClass，来回跳转样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>div{height: 600px;width: 300px;background-color: orange;}.a{background-color: blue;}</style><title>Title</title><script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">sakdas
</div>
</body>
<script>$('#d').mouseover(function () {
//        俩个状态来回切换
        $(this).toggleClass('a')}).mouseout(function () {$(this).toggleClass('a')})
</script>
</html>

第三种，点击来回跳转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>div{height: 600px;width: 300px;background-color: orange;}.a{background-color: blue;}</style><title>Title</title><script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">sakdas
</div>
</body>
<script>$('#d').click(function () {$(this).toggleClass('a')})
</script>
</html>

使用JQ来回切换样式的三种方法相关推荐

html按钮disabled状态,CSS定义input disabled样式的三种方法
表单提交的时候我们经常会让提交按钮禁用,满足条件后按钮恢复,disabled禁用按钮后怎么用CSS来改变禁用disabled按钮的样式呢?下面看青岛星网:CSS定义input disabled样式的三 ...
JQ中val(),html(),text()三种方法的区别
JQ中val(),html(),tex()三种方法的区别是内容不一样 text(参数); 有参数是改变他的文本,无值是获取他的文本 var(); 有参数是改变他的val属性,无值是获取他的val属性 ...
JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...
引入CSS样式的三种方法
样式表放在不同的地方,产生作用的范围也不同.大致来说,样式表分为内联样式表和外联样式表,即有页面内放置.外部引用.外部导入三种方式. 内联样式表内联样式表就是把样式表规则放在 < HEAD&g ...
CSS实现导航条Tab切换的三种方法
前面的话导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法布局根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效 ...
HTML的样式及引入样式的三种类型
引入样式样式引入样式的三种类型内联样式行内样式外部引入样式名样式字体颜色 color: ; 背景颜色 background-color: ; 字体大小 font-size: ; 外边距 ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
HTML引入CSS样式三种方法及优先级
HTML引入CSS样式三种方法及优先级 CSS样式的写法 HTML引入CSS样式三种方法及优先级: 方法 css的样式引用由3种方式.分别为行内样式.内部样式(嵌入式)和外部样式: 行内样式: ...
创建CSS样式的三种方式
CSS基础 - 创建CSS样式的三种方式我们使用CSS的时候,常规有三种创建CSS样式的的方式: 内联样式,内部样式表,外部样式表 1.内联样式 (不常用) style在标签中的情况就是内联样式.不 ...

使用JQ来回切换样式的三种方法

使用JQ来回切换样式的三种方法相关推荐

最新文章

热门文章