相关文章推荐
孤独的钢笔  ·  jQuery ...·  2 月前    · 
闷骚的树叶  ·  Python学习笔记 - 知乎·  2 年前    · 
文雅的海龟  ·  如何为spark ...·  2 年前    · 
备案 控制台
学习
实践
活动
专区
工具
TVP
写文章
2 0

海报分享

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>
    <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">
            width: 100px;
            height: 100px;
            background: gold;
        .big{
            width: 500px;
            height: 500px;
    </style>
</head>
    <input type="button" name="" value="切换">
    <div>1</div>
</body>
</html>
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客: 复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。