JQuery 课时23 jQuery css属性

最新推荐文章于 2022-08-13 20:13:11 发布
最新推荐文章于 2022-08-13 20:13:11 发布
阅读量170 收藏
点赞数
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221321/article/details/118500483
版权

JQuery 课时23 jQuery css属性

在这里插入图片描述

1、.css()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <div>div</div>
    <script>
        $(function(){
            $("div").css("color","red");
            // 获取某个属性值
            console.log($("div").css("color"));
        })
    </script>
</body>
</html>

在这里插入图片描述

2、.height() 获取当前高度值或者设置高度值，不受margin、padding等影响；能接受参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 30px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div>div</div>
    <script>
        $(function(){
            console.log($("div").height());
        })
    </script>
</body>
</html>

在这里插入图片描述

3、 .width()获取当前宽度值或者设置宽度值

width跟height()一样用法；能接受参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 30px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div>div</div>
    <script>
        $(function(){
            $("div").height(50);
            $("div").width(50);

        })
    </script>
</body>
</html>

设置height、width

在这里插入图片描述

4、innerHeight()

获取匹配元素的第一个当前计算高度， 包含padding，但不包含border；不能接受参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 30px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div>div</div>
    <script>
        $(function(){
            console.log($("div").innerHeight());
            console.log($("div").innerWidth());

        })
    </script>
</body>
</html>

包含了上下的padding
在这里插入图片描述

5、innerWidth()

获取匹配元素的第一个当前计算宽度， 包含padding，但不包含border；不能接受参数

6、 .offset()

获取匹配元素的第一个元素的当前坐标，或设置匹配元素的每个元素的坐标，坐标相对于文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 30px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div>div</div>
    <script>
        $(function(){
            var div = $("div");
            // 获得相对于文档的坐标
            console.log(div.offset());

            // 设置坐标
            var zuobiao={
                top:300,
                left:500
            };
            console.log(div.offset(zuobiao));
        })
    </script>
</body>
</html>

在这里插入图片描述

7、outerHeight()

在这里插入图片描述

8、outerWidth()

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 30px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div>div</div>
    <script>
        $(function(){
            var div = $("div");
            console.log(div.outerHeight());
            console.log(div.outerWidth());

        })
    </script>
</body>
</html>

在这里插入图片描述
加上参数为true，计算margin

    <script>
        $(function(){
            var div = $("div");
            console.log(div.outerHeight());
            console.log(div.outerWidth(true));//加上margin

        })
    </script>

在这里插入图片描述

9、position()-相对于 父元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            padding: 15px;
            background-color: antiquewhite;
            position: absolute;
        }
        p{
            margin-left:10px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <p>我是p</p>
    </div>
    <script>
        $(function(){
            var po=$("p").position();
            console.log(po);
        })
    </script>
</body>
</html>

在这里插入图片描述

10、scrollLeft()在这里插入图片描述

11、scrollTop()

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        .demo{
            width: 200px;
            height: 100px;
            overflow: auto;
            margin: 5px;
            padding: 5px;
            position: relative;
            border: 3px solid #666666;
            background-color: #cccccc;
        }
        p{
            width: 1000px;
            height: 1000px;
            margin: 10px;
            padding: 5px;
            border: 2px solid #666666;
        }
    </style>
</head>
<body>
    <div class="demo">
        <h1>lalal</h1>
        <p>hellp</p>
    </div>
    <script>
        $(function(){
            // 设置滚动300
            $(".demo").scrollTop(300);
            //获取滚动值
            console.log($(".demo").scrollTop());
        })
    </script>
</body>
</html>

在这里插入图片描述

卷毛崽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery属性
weixin_57752568的博客
08-26 323
Jquery属性 1.attr(name|properties|key,value|fn) 设置或返回被选元素的属性值。 name属性名称 properties作为属性的“名/值对”对象 key,value属性名称，属性值 key,function(index, attr) 1:属性名称。 2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。 2. removeAttr(name) 从每一个匹配的元素中删除一个属性 1.6以下版本在IE6使用JQuery的r
jQuery，CSS方法、属性操作
W的博客
08-15 494
jQuery，CSS方法、属性操作
jQuery之CSS属性
Those who achieve great thing do not stick to trifles
01-31 674
jQuery之CSS属性 一、属性和css操作总结: 对属性的操作: attr():设置或者获取元素的属性 方式1:获取 attr("属性名称") 方式2:设置一个属性 attr("属性名称","值"); 方式3:设置多个属性 json attr({ "属性1":"值1", "属性2":"值2" })removeAttr("属性名称"):移除指定属性 //添加class属性的时候 // a...
jQuery 的CSS属性
qinchaoyong
11-15 175
  CSS属性的设定，  可以用预先定义的 CSS样式，使用$('obj').addClass('cssStyle')/$('obj').removeClass('cssStyle'),（无参数表示删除原来的样式）    可以用    $('obj').css() 来添加属性   css 后面的参数相当与map对象， jQuery提供css()的方法来实现嵌入式改变元素样式，css()方...
jquery操作css属性
过客如期的博客
02-01 222
一，编辑class 1.$(selector).attr('class',‘className’) 2.$(selector).addClass('className') 二，追加class 1.$(selector).addClass('className') 三，删除class 1.$(selector).removeClass('className') 四，class开关 1.$(selector).toggleClass('className') 五，直接操作css属性 1.操作单个属性：$(sel
jQuery之工具方法&CSS属性及方法
X4866233的博客
03-19 965
$工具中的类方法（静态方法） 1.1 each()遍历数组 对象 对象数组 //数组的定义 var arr = [] var arr = new Array(); //遍历对象 $(function() { //一、$工具方法 //1.1$.each 遍历对象 数组 //定义对象 var stu = {"name":"张三","age":38}; //遍历对象 k指的是索引 v指的是元素 $.each(stu,function(k,v){ con...
jQuery操作css属性等操作
热门推荐
CSDNzhaojiale的博客
06-17 1万+
操作css属性 jQuery操作css属性主要依靠：css方法 设置css方法: 逐个设置: 在css方法中传入属性,值 两者用逗号隔开 设置完一个属性，同样的方法重新设置另一个属性 链式设置 在css方法中传入属性,值 两者用逗号隔开 设置完一个属性,在后面 .css(属性,值) 设置另一个，可以一直链下去 批量设置 在css方法中传入一个对象 对象上写要设置的属性和值 和设置css属性的写法一样 获取css方法: 在方法中传入要获取属性即可 // 1
jquery网页刷新后控件失效_JQuery Mobile - 解决动态更新页面内容，CSS失效问题！...
weixin_39867509的博客
12-19 150
今天编写JQuery Mobile程序，需要对数组数据动态创建，并且每条数据对应一个复选框，于是我很顺利写了一个Demo，当我运行时候发现，和我期望的不一样！复选框确实创建出来了，但是却没有CSS效果，完全是Html的！于是上网搜索，想尽快解决，但是，发现网上目前提供的方法都无法解决！！最终，我就算是搞定这个问题了吧，下面我说说解决方法，抛砖引玉！我最开始的想法是直接使用控件组，那样直接就创建出来...
初识jQuery
04-01
jQuery的`animate()`方法允许创建自定义动画，它可以改变CSS属性值，如宽度、高度、透明度等。例如： ```javascript $("#element").animate({width: "200px"}, 1000); ``` 这将在1秒内将元素的宽度平滑地调整到200...
《响应式网页开发实战》教学教案—第9章 jQuery Mobile样式.pdf
06-23
jQuery Mobile 默认提供了多种预设主题，如 a, b, c, d, e 等，可以更改这个属性值来切换主题。此外，还可以通过 CSS 自定义主题，以满足特定设计需求。 在教学过程中，可以采用任务驱动法、分组讨论法、理论实践...
Jquery图片切换
08-10
这个例子涵盖了DOM操作、事件处理、定时器以及简单的CSS动画，是jQuery应用的典型示例。在实际项目中，可以进一步优化和扩展，例如添加无限循环、预加载图片、自定义动画效果等功能，以满足不同场景的需求。记得在...
html中怎样隐藏列,关于jquery：隐藏/显示HTML表中的列
weixin_39970668的博客
06-03 792
我有一个包含几列的HTML表，我需要使用jquery实现一个列选择器。 当用户单击复选框时，我要隐藏/显示表中的相应列。 我想在不将类附加到表中的每个td的情况下执行此操作，是否可以使用jquery选择整个列？ 以下是HTML的示例。Header 1Header 2Header 3Column1Column2Column3Column1Column2Column3Column1Column2Col...
jq css属性操作
lujiayingwing的博客
10-25 582
点击打开链接 //设置属性 $('#box').css({width:'200px',height:'200px',border:'1px black solid'});//复合属性          //获取属性 var boxstyle=$('#box').css('background'); //alert(boxstyle);          //添加div的移入事件
jQuery属性&CSS（二）
m0_67376124的博客
03-18 578
目录 tip 一，工具方法 主要方法 代码演示 二，属性 主要属性 代码演示 使用jQuery实现全选\反选功能 三，CSS 1.css的样式设置 2.位置 3.尺寸 tip： 我们在使用jQuery的时候千万不要把JavaScript忽略大小写的习惯带入到jQuery中来，jQuery不同于Js，要严格区分大小写。 js适用的方法与jquery并不通用,如果非要使用，可以相互转换. 一，工具方法 主要方法 $.each() 遍历数组、对象...
jQuery修改css属性
banjuan3729的博客
01-12 280
jQuery CSS 操作jQuery 拥有三种用于 CSS 操作的重要函数：$(selector).css(name,value)$(selector).css({properties})$(selector).css(name)函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值：实例$(selector).css(name,value)$("p").c...
jQuery操作CSS属性的相关方法
owen_william的博客
05-07 1675
1.前言 jQuery提供了以下几种操作DOM元素CSS样式的方法，包括直接访问、修改DOM元素的class属性值，还提供了访问、修改DOM元素内联CSS属性值的方法，除此之外还提供了大量直接访问、修改DOM元素大小和位置的方法。 jQuery提供的操作CSS属性的相关方法如下。   1)        addClass(class):将指定的CSS定义添加到jQuery对象包含的所有DO
JQuery中的CSS属性及操作
m0_63498249的博客
08-13 2284
JQuery中的css()方法、JQuery的CSS操作、JQuery的class操作
jQuery（$工具方法&CSS属性及方法）
XiaoLiangyaya的博客
03-17 1026
1.$工具方法 1.$.each()：遍历数组、对象、对象数组中的数据 2.$.trim()：去除字符串两边的空格 3.$.type(obj)：得到数据的类型 4.$.isArray(obj)：判断是否是数组 5.$.isFunction(obj)：判断是否是函数 6.$.parseJSON(obj)：解析json字符串转换为js对象/数组 2.jQuery属性和CSS 1.属性 1.attr()：获取某个标签属性的值，或...
jQuery修改css属性和修改样式
m0_53438035的博客
08-28 2609
修改css属性 方法一： $().css("属性",属性值"") 注意如果括号内只有属性则返回该属性的值。 方法二： $().css({属性:属性值，·····}) 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <
jQuery入门：JavaScript与CSS开发实战指南
《开始使用jQuery进行JavaScript和CSS开发》是一本全面指南，作者Richard York旨在帮助初学者快速入门JavaScript和CSS编程，特别侧重于利用jQuery这强大且流行的JavaScript库。书中内容丰富，涵盖了jQuery的核心API...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值