欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

设置元素样式

程序员文章站 2022-04-29 13:49:18
...
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{
                font-size: 30px;
                color: green;
                /*width: 2000px;*/
                height: 8000px;
            }
            button{
                position: fixed;
                bottom:0;
                top:0;
            }
        </style>
        <script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        $(document).ready(function(){

获取css样式 :css()方法;

不管css属性是行内的还是头部或者外部。只要在标签上生效，都可以拿到该属性的值，js只能获取到行内的css属性;


            var  $bgColor = $('p').css('background-color')
            console.log($bgColor);
            
            var $color = $('p').css('color');
            console.log($color)

设置css样式: css()方法;

添加在行内样式表中,参数值如果有单位则一定要带上单位

            $('p').css('font-size','50px')

css方法一次添加多个样式


            $('p').css({

                'font-size':'16px',

                'color':'black'

            })

设置、获取元素的高度:height()

参数值可以为数值类型，当值是数值时默认为px ;如果以其他单位为高度单位,需要传递包含单位类型的字符串

            var  $height = $('p').height();
            console.log($height);
            $('p').height('60%');

设置、获取宽度等同高度的设置

设置、获取元素相对于文档的偏移量 获取到的值是一个对象，可以通过访问left和top属性的形式获取到该标签相对于html标签(浏览器边框)的左侧和顶部的偏移量

任何类型的标签，都可以通过这个方法设置获取/偏移量

           var $offset = $('p').offset();
           console.log($offset);
           console.log('left:'+$offset.left+'top:'+$offset.top);*/

设置标签相对于文档的偏移量

            //(写法一)
            //var obj = {top:100,left:100};
            //$('p').offset(obj);
            //(写法二)
            //$('p').offset({top:100,left:100})

获取标签相对于父标签(子标签必须参照父标签定位)的偏移量 :position 方法

            /*var $position = $('p').position();
            console.log($position);*/

注意: position 只能获取值，不能设置值

获取、设置水平滚动条的的位置 scrollLeft();

            /*var $scrollLeft = $('p').scrollLeft();
            console.log($scrollLeft);*/

注：首先必须先确认要操作滚动条是属于哪个标签,在获取到滚动条对应的标签后,在设置scrollLeft才会生效
设置：

            //$('body').scrollLeft(500);
            //$(window).scrollLeft(500);
            //$(document).scrollLeft(500);

设置、获取垂直滚动条的位置

获取：

            /*var $scrollTop = $('p').scrollTop();
            console.log($scrollTop);*/

eg:
通过jQuery获取到按钮，添加点击事件中在点击事件中设置滚动条的位置到返回顶部的目的

        $('body').scrollTop(3000);
        
        $('button').click((function){
            $(document).scrollTop(0);    
        });
        
    })

    </script>
</head>
<body>

    <p style="background-color: yellow;">地我定的那男的</p>
    <button>回顶部</button>
</body>

</html>

上一篇： Perl 5.12.3 发布

下一篇： DOM 操作元素对象的属性和CSS样式

推荐阅读