第一、动态修改css样式
1、第一种写法,动态修改样式和按钮名字,绑定按钮
html代码
<button id = "buttonem">邮箱登录</button>
js代码
// 加载 LayUI 提供的相关模块
layui.use(['layer', 'jquery'], function () {
// 得到模块实例对象
var layer = layui.layer;
var $ = layui.jquery;
// 绑定登录按钮
$('#buttonem').on('click', function () {
// 动态修改样式
//$('#buttonem').text("用户名登录").css("color",'red');
//还可以在css()后面在添加css()样式
$('#buttonem').text("用户名登录").css("color",'red').css('font-size','30px');
});
});
点击之后
2、第二种写法 ,动态修改样式,创建 一个对象来存储 css 样式,效果和上面第一种写法时一样的
// 加载 LayUI 提供的相关模块
layui.use(['layer', 'jquery'], function () {
// 得到模块实例对象
var layer = layui.layer;
var $ = layui.jquery;
// 绑定登录按钮
$('#buttonem').on('click', function () {
//创建对象,存储css样式
var cs = {
color: 'blue',
textDecoration: 'underline',
}
// 动态修改样式
$('#buttonem').text("用户名登录").css(cs);
});
});
第二、hover()方法的使用
1、第一种写方法,触碰改变text字体样式
html代码
<h1 id= "id">靓仔<h1>
js代码
// 加载 LayUI 提供的相关模块
layui.use(['layer', 'jquery'], function () {
// 得到模块实例对象
var layer = layui.layer;
var $ = layui.jquery;
//动态触碰变色
$(function(){
$('#id').hover(function(){
$(this).css('color','green');
},function(){
$(this).css('color','blue');
});
});
});
没触碰之前是蓝色
触碰之后是绿色
1、第二种写法,触碰div隐藏,移开显示
html代码
<div style="border:10px solid red;width:300px;height:300px" id = "xxxx" >
<span>帅气</span>
</div>
js 代码
// 加载 LayUI 提供的相关模块
layui.use(['layer', 'jquery'], function () {
// 得到模块实例对象
var layer = layui.layer;
var $ = layui.jquery;
//动态触碰变色
$(function(){
$('#xxxx').mouseover(function(){
$(this).hide();
}).mouseout(function(){
$(this).show();
});
});
});
半杯不啰嗦,希望能够帮助有需要的那个人!