专栏首页Devops专栏jquery样式操作

jquery样式操作

jquery用法思想

同一个函数完成取值和赋值

操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特别注意

选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

编写一个点击按钮,切换div样式的示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){

            $('input').click(function(){
                // alert('点击');
                $('div').css({'background':'cyan'});
                // $('div').addClass("big");
                $('div').toggleClass('big');
            })
        })
    </script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: gold;
        }

        .big{
            width: 500px;
            height: 500px;
        }
        
    </style>
</head>
<body>
    <input type="button" name="" value="切换">
    <div>1</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • jquery 元素节点操作 - 创建节点、插入节点、删除节点

    前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。

    Devops海洋的渔夫
  • CSS3圆角、opacity 透明度、rgba 背景色设置

    设置某一个角的圆角,比如设置左上角的圆角: border-top-left-radius:30px 60px;

    Devops海洋的渔夫
  • React 中高阶函数与高阶组件(上)

    React 中最大的一亮点,就是组件化开发模式,而编写 React 组件,对于无状态的组件,我们可以用函数式组件编写,而复杂的组件(聪明组件/外层组件)可以用类...

    itclanCoder
  • Vue.js学习笔记(2)

    程序员不务正业
  • CSS入门12-浮动与清除浮动

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • NEC html规范

    HTML规范 - 整体结构 HTML基础设施 文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”。 必须申明...

    用户1197315
  • django 实现电子支付功能

      思路:调用第三方支付 API 接口实现支付功能。本来想用支付宝来实现第三方网站的支付功能的,但是在实际操作中发现支付宝没有 Python 接口,网上虽然有他...

    希希里之海
  • 一天带你入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    用户1518699
  • 一天带入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    十月梦想

扫码关注云+社区

领取腾讯云代金券