jQuery——09——操作css样式位置尺寸

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

一：操作css样式 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //1：逐个设置
            $("div").css("width", "100px");
            $("div").css("height", "100px");
            $("div").css("background", "red");

            //2:链式设置，链式操作如果大于3步，建议分开
            $("div").css("width", "100px").css("height", "100px").css("background", "red");
            //3:批量设置
            $("div").css({
                width: "100px",
                height: "100px",
                background: "red"
            })
            //4:获取css样式值
            console.log($("div").css("background"));
        })
    </script>
</head>

<body>
    <div></div>
</body>

</html>

 

二：操作css位置和尺寸

width:实际宽度

innerWidth:实际宽度+内边距

outerWidth:实际宽度+内边距+边框

outerWidth(true):实际宽度+内边距+边框+外边距

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 50px solid blueviolet;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            position: absolute;
            left: 50px;
            top:50px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
        var btns=document.getElementsByTagName("button");
        //监听获取
        btns[0].onclick=function(){
            console.log($(".father").width());
        }
        btns[1].onclick=function(){
            $(".father").width("500px");
        }
        })
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
</body>

</html>

offset和position方法：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 50px solid blueviolet;
            margin-left: 50px;
            position: relative;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            /*offset([coordinates])
    作用：获取元素距离窗口的偏移位 即元素到浏览器边框
    */
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                console.log($(".son").offset().left);
            }
            //距离浏览器的偏移位
            btns[1].onclick = function () {
                $(".son").offset({
                    left: 10 //offset不用加px，因为其返回值就是没有px单位
                })
            }

            /*
    position()
    
    作用：获取元素距离定位元素的偏移位
    注意：Position方法只能获取不能设置
        */
            btns[2].onclick = function () {
                console.log($(".son").position().left);
            }

        })
    </script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
    <button>获取2</button>
</body>

</html>

scrollTop方法：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .scroll{
            width: 100px;
            height: 250px;
            border: 1px solid red;
            overflow: auto;
        }
       
    </style>
    <script type="text/javascript">
        $(function () {
            var btns=document.getElementsByTagName('button');
        //获取滚动的偏移位
         btns[0].onclick=function(){
             console.log($('.scroll').scrollTop());
        //获取网页滚动的偏移位  在IE里使用body才有值
             console.log($('html').scrollTop());
             //兼容写法 为了保证浏览器的兼容，需要按照如下写法
             console.log($('html').scrollTop()+$('body').scrollTop());
         }
        //设置滚动的偏移位 
        btns[1].onclick=function(){
             $('.scroll').scrollTop(300);//传字符串不行，说明里面接收不是一个字符串
             //设置网页滚动的偏移位
             $('html').scrollTop(500);
         }
          
        })
    </script>
</head>

<body>
      <div class="scroll">我是div我是brdi我是div我是divv我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是divv我是div我是div
        我是div我是div我是div
      </div>
      <button>获取</button>
      <button>设置</button>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
</body>

</html>

 

野生小米椒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态调用css文件——jquery的应用
10-31
标题中的“动态调用css文件——jquery的应用”指的是利用JavaScript库jQuery来实现在网页中动态加载或切换CSS样式表的功能。这种技术对于增强用户体验、实现主题切换或个性化定制有着重要作用。下面将详细介绍这个...
$( ).height( );和$().css("height",)的区别
houdabiao的博客
04-13 1487
$( ).height( );和$().css("height",)的区别$().height()是不包含padding和margin的设置，而$().css("height"，)是包含的，和border-box是有点类似的效果
js动态处理容器比例
nly19900820的博客
02-02 548
js：     $(function () { $('.respP').children().length; var paWidth = parseInt($('.respP').css('width')); var childArr = document.getElementsByClassName('resp'); var childWidth = paWidth/($('.resp
web过渡（js/transition/display）
weixin_45627194的博客
11-18 817
文章目录JavaScript过渡CSS过渡transition过渡display隐显过渡 JavaScript过渡 具体代码如下： <title>js过渡</title> <link id="mystyle" rel="stylesheet" href="index1.css"> </head> <body> <div id="wrapper"> <br> <br&gt
JQ淡入 淡出 隐藏 显示 、隐藏和显示（slideToggle）、animate()、slideDown、stop 学习
DN_XIAOXIAO的博客
10-12 752
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).read...
SpringSecurity的配置使用
weixin_40942790的博客
07-27 716
SpringSecurity 授权：授予当前用户角色所拥有的权限 完整的认证和授权需要7张表 配置web.xml 配置整合SpringSecurity的代理过滤器 配置前端控制器 DispatcherServlet <!-- 配置整合SpringSecurity的代理过滤器 1.要整合SpringSecurity，必须要配置这个过滤器DelegatingFilterProxy 2. 名字还不能乱写，一定...
初探jquery——表单应用范例
10-31
### 初探jQuery——表单应用范例 #### 一、引言 随着Web开发技术的不断进步，jQuery作为一种轻量级的JavaScript库，在前端开发领域占据着举足轻重的地位。它简化了许多复杂的DOM操作，并提供了丰富的插件支持，...
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
11-22
《牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作》 jQuery是一种广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作，提供了丰富的API和强大的选择器，使得开发者能够更高效地...
jQuery——固定导航栏
05-20
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果等任务，使得创建交互式网页变得更加便捷。本篇将详细介绍如何使用jQuery实现一个固定导航栏的功能。 首先，我们要理解“固定定位”...
jQuery原理——24——根据DOM操作相关方法（empty,remove,html,text）编写自己的jQuery框架
x1037490413的博客
12-09 3961
HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
window和document的区别
x1037490413的博客
10-20 2742
$(window)和$(document)获取到的对象不同。 1、Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算. 2、Document 对象是 Window 对象的一部分,每个载入浏览器的 HTML 文档都会成为 Document 对象. 3:如果是基于浏览器操作的比如滚动条，就要用$wind...
Js控制网页鼠标滚动时，顶部导航条，由透明变成有背景色
x1037490413的博客
12-28 1198
<script type="text/javascript" src="./files-m/jquery-1.9.1.min.js"></script> <script > //网页加载时运行 $(function(){ navHeader(); $(window).scroll(function () { navHeader(); }) function navHeader() { if ($(windo
用jQuery实现qq音乐播放器
x1037490413的博客
11-26 882
折腾了很久，最终还是决定先放弃，继续学习jQuery后面的内容，做了有一大半吧，核心功能不想搞了，以后有时间再继续吧 贴代码： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
jQuery——17——无限循环滚动轮播图
x1037490413的博客
10-28 823
注意：一共有四张图片，但是在ul里要放六张图，次序为第一张，第二张，第三张，第四张，第一张，第二张。 因为如果放四张，那么在第三张和第四张时切换第一二张因为图片不一样会闪，放六张图片，最后的第一二张放完切换先前的第一二张，有两张一样的就覆盖了，（唉表达能力较差）。 <!DOCTYPE html> <html lang="en"> <head> ...
如何做一个tab栏下划线跟随选中的li移动
x1037490413的博客
01-09 677
第一个知识要想让标签有选中状态（active）就添加样式 要实现这样的效果需要jquery和伪元素，由于每个字数不一样，纯用Jquery让它left移动比较难对齐。 我们可以借鉴华为云， 页面结构大概这样 以上代码是添加类 思路:给ul设置宽度和相对定位，给li加伪元素和绝对定位，这样下划线就能定好位，并且随着浏览器宽度变化也不会改变，首先先宽度设置为0，这样就不会显示出来，然后有active状态之后，再让它有宽度就能显示出来了 如果希望宽度和li标签一样长 16px不一定对，可以自己试试 ...
jQuery原理——22——监听DOM加载
x1037490413的博客
12-05 625
onload的性能慢，会等DOM元素加载完毕，并且还会等到资源也加载完毕才会执行，而DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调，但是IE8以下不支持，将addEventListener监听事件换成attachEvent，但是attachEvent不兼容火狐谷歌，同时DOMContentLoaded也不兼容IE，所以可用readyState 用法：doc...
jQuery实现拍打灰太狼小游戏
x1037490413的博客
11-08 532
要图片的同学可以私聊我~ html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
jQuery——12——展开和收起动画以及小练习折叠菜单和下拉菜单
x1037490413的博客
10-26 472
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
jQuery——19——新浪微博（发布，顶，踩，删除功能）
x1037490413的博客
11-05 431
html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值