首页 前端知识 jQuery在js里动态修改样式和hover()方法 (入门)

jQuery在js里动态修改样式和hover()方法 (入门)

2024-08-07 00:08:05 前端知识 前端哥 481 768 我要收藏

第一、动态修改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();
            });
    });
});





半杯不啰嗦,希望能够帮助有需要的那个人!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14972.html
标签
评论
发布的文章

前端-axios应用在html文件

2024-08-15 23:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!