javascript文档对象模型-CSS 操作

作者: 鲁智深 分类: JAVASCRIPT 发布时间: 2016-03-12 23:59

操作内联css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07 操作内联css</title>
</head>
<body>
<p id="p1" style="color: lightcoral">这是一个段落内容.</p>
<p id="p2" class="pClass" style="color: lightcoral">这是一个段落内容.</p>
<script>
      // 1,Element对象提供操作属性的方法
      /*
         DOM 的属性操作内联样式
         设置内联样式: setAttribute('style', CSS 样式内容)
         获取内联样式: getAttribute('style')
      */
      var p1 = document.getElementById('p1');
      p1.setAttribute('style','color:lightseagreen');//替换元素属性


      /*
        2、操作内联样式,设置内联样式
        element.style.attrName = attrValue
      */
      var p2 = document.getElementById('p2');
      p2.style.color = '#000';
</script>
</body>
</html>

操作外联样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08 操作外联样式</title>
    <link rel="stylesheet" href="style.css">
    <style>
        /* 一个选择器 -> 一个CSS规则 */
        .pClass {
             color: hotpink;
         }
        .miClass {
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
<p id="p1" class="pClass">这是一个段落内容.</p>
<script>
      // 通过获取<style>标签
     var style = document.getElementsByTagName('style');//查找dom文档中所有style元素节点
     console.log(style[0]);

     var styleSheetList = document.styleSheets;
     console.log(styleSheetList);//返回一个包含当前页面所有外联的样式的集合
     console.log(styleSheetList[0]);//返回第一个外联样式----返回对象CSSStyleSheet
     console.log(styleSheetList[1]);//返回第二个外联样式----返回对象CSSStyleSheet
     
     console.log(styleSheetList[1].cssRules);//返回对象CSSRuleList
     var CSSRuleList = styleSheetList[1].cssRules;

     console.log(CSSRuleList[0]);//返回对象CSSStyleRule

     console.log(CSSRuleList[0].style);//返回对象CSSStyleDeclaration该对象包含了所有有关CSS属性的对象

     console.log(CSSRuleList[0].style.color);//找到该对象包含了所有有关CSS属性的对象就能直接操作了。。。
</script>
</body>
</html>

获取当前有效样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>获取当前有效样式</title>
    <style>
        .pClass {
            color: lightcoral;
        }
    </style>
</head>

<body>
    <p id="p1" class="pClass" style="color: lightseagreen;">这是一个段落内容.</p>
    <script>
        /*
           获取当前元素有效的样式
           window.getComputedStyle(element, [pseudoElt])
           * 参数
           * element - 表示获取当前有效样式的标签
           * pseudoElt - 可选,用于匹配伪元素
               * 如果当前操作的是普通元素,必须为 null
           * 返回值 - 返回指定标签的当前有效样式
           * 还是 CSSStyleDeclaration 对象
           window.getComputedStyle(element, null)
           * 注意 - 具有浏览器兼容问题(IE 8及之前版本不支持)
      */
        var p1 = document.getElementById('p1');
        console.log(window.getComputedStyle(p1, null));//包含所有元素的样式对象
        console.log(window.getComputedStyle(p1, null).color);//输出样式

        /*
          解决兼容问题:
          支持 IE 8 及之前版本
          element.currentStyle
        */
        function getstyle(element) {
            if (window.getComputedStyle) {
                result = window.getComputedStyle(element, null)
            } else {
                result = element.currentStyle;
            }
            return result;
        }

        console.log(getstyle(p1).color);
    </script>
</body>

</html>

获取可见宽度和高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>获取可见宽度和高度</title>
    <style>
        .dClass1 {
            width: 200px;
            height: 200px;
            border: 50px solid lightslategray;
            background-color: lightseagreen;
            padding: 50px;
            margin: 50px;
        }

        .dClass {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            border: 50px solid lightslategray;
            background-color: lightseagreen;
            padding: 50px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="d2" class="dClass1"></div>
    <div id="d1" class="dClass"></div>
    <script>
        /*
        element.clientWidth;
        element.clientHeight;
        获取可见宽度和高度 - 不能设置
        * content-box--默认盒子模型
          * clientWidth = width + padding-left + padding-right
          * clientHeight = height + padding-top + padding-bottom
        * border-box--怪异盒子模型
          * clientWidth = width - border-left - border-right
          * clientHeight = height - border-top - border-bottom
       */
        /* 默认盒子 */
        var d2 = document.getElementById('d2');
        console.log(d2.clientWidth);
        console.log(d2.clientHeight);
        /* 怪异盒子 */
        var d1 = document.getElementById('d1');
        console.log(d1.clientWidth);
        console.log(d1.clientHeight);
    </script>
</body>

</html>

获取实际宽度和高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>获取实际宽度和高度</title>
    <style>
        .dClass {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            border: 50px solid lightslategray;
            background-color: lightseagreen;
            padding: 50px;
            margin: 50px;
        }
        .dClass2 {
            width: 200px;
            height: 200px;
            border: 50px solid lightslategray;
            background-color: lightseagreen;
            padding: 50px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="d1" class="dClass"></div>
    <div id="d2" class="dClass2"></div>
    <script>
         /*
        获取实际宽度和高度----元素的物理/图形的尺寸
        element.offsetWidth
        document.getElementById(id_attribute_value).offsetHeight;
        * content-box
          * offsetWidth = width + padding + border
          * offsetHeight = height + padding + border
        * border-box
          * offsetWidth = width
          * offsetHeight = height
        */

        //怪异盒子
        var d1 = document.getElementById('d1');
        console.log(d1.offsetWidth);
        console.log(d1.offsetHeight);

        //默认盒子
        var d2 = document.getElementById('d2');
        console.log(d2.offsetWidth);
        console.log(d2.offsetHeight);
         
    </script>
</body>

</html>

获取定位父元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>获取定位父元素</title>
    <style>
        #d1 {
            width: 300px;
            height: 400px;
            padding: 50px;
            background-color: lightslategray;
           
        }

        #d2 {
            width: 200px;
            height: 300px;
            padding: 50px;
            background-color: lightseagreen;
            position: absolute;
        }

        #d3 {
            width: 100px;
            height: 100px;
            padding: 50px;
            background-color: lightcoral;
            margin-top:30px;
        }
    </style>
</head>

<body>
    <div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
    </div>
    <script>
        /*
         element.offsetParent
        */
        /*
        获取定位父元素,简单的说就是和css中position定位元素有关
        * 作用 - 获取当前元素的祖先元素中第一个开启定位的元素
        * 情况
          * 如果祖先元素中没有一个元素开启定位 -> <body>元素
          * 如果祖先元素中只有一个元素开启定位 -> 开启定位的元素
          * 如果祖先元素中有多个开启了定位 -> 距离当前元素最近的开启定位的元素
        */
        //offsetParent方法,获取定位父元素,简单的说就是和css中position定位元素有关
        var d3 = document.getElementById('d3');
        console.log(d3.offsetParent);

        //通过parentElement获取父节点
        console.log(d3.parentElement);

        //offsetLeft 根据父级位置,可以表示向左偏移的像素值
        console.log(d3.offsetLeft);

        // offsetTop 根据父级位置,可以表示向上偏移的像素值
        console.log(d3.offsetTop);

    </script>
</body>

</html>

鼠标滚动滚轮事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>05 鼠标滚动滚轮事件</title>
    <style>
        body {
            margin: 0px;
            height: 2000px;
        }
    </style>
</head>

<body>
    <div id="show">
        <div id="content"></div>
    </div>
    <script>
        /*
        * 当前页面
          * window对象 -> 表示当前浏览器窗口
          * document对象 -> 表示当前HTML文档
          * <body>元素 -> 表示显示在浏览器的内容
        * 滚动事件
          * scroll事件 - 表示滚动事件
          * mousewheel事件 - 表示鼠标滚轮事件
        */
        //scroll这是鼠标滚动事件
         var body = document.body;//IE浏览器 -> 不支持
          body.onscroll = function(){
              console.log('这是鼠标滚动事件');
          }
         
          document.onscroll = function(){//IE 8及之前版本 -> 不支持
              console.log('这是鼠标滚动事件');
          }
 
           window.onscroll = function(){//推荐使用
              console.log('这是鼠标滚动事件');
          }  

        //mousewheel这是鼠标滚轮事件
           window.onmousewheel = function() {
               console.log('鼠标滚轮滚动事件');
           }
       
        //总结:事件有2种,推荐用scroll
        //scroll是鼠标滚轮和,滚动条都能触发
        //mousewheel只能是鼠标滚轮触发时才能进行
    </script>
</body>

</html>
拖动鼠标滚轮事件

拖动鼠标滚轮事件

获取滚动宽度和高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>获取滚动宽度和高度</title>
    <style>
        body {
            margin: 0px;
        }

        #show {
            width: 80%;
            height: 500px;
            border: 10px solid lightslategray;
            margin: 0 auto;
            overflow: auto;
        }

        #content {
            width: 100%;
            height: 2000px;
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <div id="show">
        <div id="content"></div>
    </div>
    <script>
             /*
                var xScrollWidth = element.scrollWidth;
                元素.属性
                scrollWidth: 获取指定标签滚动区的宽度。
                scrollHeight: 获取指定标签滚动区的高度。
                scrollLeft: 获取水平滚动条滚动的距离。
                scrollTop: 获取垂直滚动条滚动的距离。
             */
             var body = document.body;//元素的属性,所以需要找的body
             console.log(body.scrollWidth);//值是元素的内容宽度

             //给框设定滚动事件
             var show = document.getElementById('show');
             show.onscroll = function(){
                 console.log(show.scrollHeight,show.scrollTop);
             }

             //结论:
             //scrollTop的高度=内容的高度-容器的高度
             //内容的高度 = scrollTop的高度 + 容器的高度
    </script>
</body>

</html>

图1

scrollTop值

scrollTop值


图2
scrollTop值 1

scrollTop值 1


图3
scrollHeight与scrollTop之间的关系

scrollHeight与scrollTop之间的关系

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注