JavaScript的样式操作

其他 2021-11-20 20:55:54 阅读次数: 0

JavaScript的样式操作

你好！ 这是我自己编辑的一些知识点。如果你想学习JavaScript的有关知识, 可以仔细阅读这篇文章，了解一下关于JavaScript的基本语法知识。

样式操作

获取内联样式

getAttribute()方法

Element对象的getAttribute()方法的语法结构如下：

var value=element.getAttribute('style');
  • 调用getAttribute()方法的element表示HTML页面元素。
  • 传递的参数style表示属性名称。
  • 返回值则是指定属性名对应的值（内联样式的声明内容）。
<p id='p1' style='color:lightcoral;font-weight:bolder'>这是一个段落内容</p>
<script>
    var pElem=document.getElementById('p1');
    var style=pElem.getAttribute('style');
    console.log(style);
</script>

DOM对象的style属性

由于DOM规范标准中将Document对象定位的HTML页面元素解析为相应的对象，而这些对象都继承于HTMLElement对象。该对象提供了style属性，返回CSSStyleDeclaration对象。

这是一个段落内容

CSSStyleDeclaration对象

通过element.style返回的是CSSStyleDeclaration对象。CSSStyleDeclaration对象表示一个CSS属性键值对的集合。

属性或方法 描述
cssText 声明块的文本内容
length 属性的数量
item() 返回属性名。例如：nameString=styleObj.item(0) Alternative;nameString=styleObj[0]
getPropertyValue() 返回属性值。例如：valString=styleObj.getPropertyValue(‘color’)

  • cssText属性

    通过element.style.css.Text属性获取CSS声明块的文本内容。

    这是一个段落内容

    注意：cssText属性返回的是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>
  </head>
  <body>
    <div
      id="d1"
      style="width: 200px; height: 200px; border: 1px solid grey"
    ></div>
    <script>
      //style属性是指定元素的属性 -> 通过属性操作完成
      //1.节点方式
      var div = document.getElementById("d1");
      var attrNode = div.getAttributeNode("style");
      var style = attrNode.nodeValue;
      console.log(style);

      //2.元素方式
      var div = document.getElementById("d1");
      var style= div.getAttribute("style");
      console.log(style);

      /*
       DOM中HTMLElement对象提供了style属性
       *返回CSSStyleDeclaration对象
         *DOM对于CSS中所有样式属性提供的对象（封装了所有样式属性）
       *得到样式属性对应的值 -> 字符串类型（将其转换为Number类型）
      */
      var div=document.getElementById('d1');
      var style=div.style;
      console.log(style.width);
    </script>
  </body>
</html>

例：

<!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>
</head>
<body>
    <div
      id="d1"
      style="width: 200px; height: 200px; border: 1px solid grey"
    ></div>
    <script>
        var div=document.getElementById('d1');
        //得到的是CSSStyleDeclaration对象
        var style=div.style;

        //cssText属性 - 获取当前元素中所有的样式属性内容（字符串类型）
        console.log(style.cssText);
        //length属性 - 获取当前元素中样式属性的个数（不一定与设置的个数一致）
        console.log(style.length);
        //item(index)方法 - 获取当前元素中指定位置的样式属性
        var attrName=style.item(0);
        console.log(style.item(0));
        //getPropertyValue(name)方法 - 获取当前元素中指定属性名对应的样式属性名
        console.log(style.getPropertyValue(attrName));

        //遍历对象
        for (var attr in style){
      
      
            console.log(attr);
        }
    </script>
</body>
</html>

获取外联样式表

Document对象的styleSheets属性

Document对象提供了styleSheets属性,该属性返回包含所有外联样式表（内嵌样式表和外联样式表）的集合对象。

var styleSheetList=document.styleSheets;
  • 作为返回值的styleSheetList是一个由styleSheet对象组成的列表，每个styleSheet对象表示HTML页面中内嵌样式表或外联样式表。
console.log(document.styleSheets);

例：

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        .d2{
      
      
            width: 200px;
            height: 200px;
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <script>
        //内嵌样式表 -> 获取<style>元素
        // var styleElement=document.getElementsByTagName('style')[0];
        // var style=styleElement.textContent;
        // console.log(style);
        
        /*
         Document对象提供了styleSheets属性
         * 作用 - 获取当前HTML页面中所有的样式表
         * 返回 - StyleSheetsList对象（类数组对象）
        */
        var stylesheetList=document.styleSheets;
        console.log(document.styleSheets);
        /*
         CSSStyleSheet对象
         *作用 - 表示某个指定的样式表
         *属性
           *type属性 - 表示当前使用的是CSS样式
           *href属性 - 表示当前样式表的路径
           *cssRules/rules属性 - 当前样式表中所有的样式规则
        */
        var styleSheet=stylesheetList[0];
        console.log(styleSheet);
        /*
         CSSRulesList对象
         *作用 - 表示当前样式表中的所有规则集合（类数组对象）
        */
        var cssRulesList=styleSheet.rules;
        console.log(cssRulesList);
        /*
         CSSStyleRule对象
         *作用 - 表示当前样式表中指定的样式规则
         *属性
           *cssText属性 - 表示当前样式规则的字符串内容
           *style属性 - 表示当前样式规则（CSSStyleDeckaration对象）
        */
        var cssStyleRule=cssRulesList[0];
        console.log(cssStyleRule);

        var cssStyleRule=cssRulesList[0];
        console.log(cssStyleRule);

        var styleDecl=cssStyleRule.style;
        console.log(styleDecl.width);
        /*
         DOM中提供有关外联样式的获取与设置
         *操作性比较复杂
         *操作时容易出错
         实际情况：
         1.页面整体样式风格改变 -> 通过<link>元素的href属性的值的修改（修改引入的CSS文件）
         2.页面局部样式风格改变 -> 内联样式的优先级别高于外联样式的特点（通过内联样式覆盖外联样式）
        */
    </script>
</body>
</html>

获取class属性

获取当前有效样式

getComputedStyle()方法

window对象中提供了getComputedStyle()方法，用于获取指定元素的当前有效样式，得到CSSStyleDeclaration对象。

var style=window.getComputedStyle(element,[pseudoElt]);
  • element参数表示获取有效样式的指定元素。
  • pseudoElt参数是个可选项，指定一个要匹配的伪元素的字符串。

注意：pseudoElt参数必须对普通元素省略（或null）。

getComputedStyle()方法的返回值是CSSStyleDeclaration对象，表示指定元素的有效样式。

var btn=document.getElementById('btn');
var style=window.getComputedStyle(btn,null);
console.log(style.backgroundColor);

例：

<!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>
    <style>
        #d1{
      
      
            color: ivory;
            font-family: '宋体';
        }
    </style>
</head>
<body>
    <div id="d1" style="width: 200px;height: 200px;background-color: indianred;">瓦伦西亚</div>
    <script>
        /*
         Window对象的getComputedStyle(element)方法
         *作用 - 获取指定元素的当前有效样式内容
         *参数
           *element - 指定的元素
         *返回值 - CSSStyleDeclaration对象
         *注意 - 该方法仅用于获取，不能用于设置
        */
       var div=document.getElementById('d1');
       var style=window.getComputedStyle(div);
        console.log(style);
        // getComputedStyle(element)方法具有浏览器兼容问题
        // *IE8以下不支持
        var style=div.currentStyle;
        console.log(style);

        function getStyle(element){
      
      
            if(element.getComputedStyle){
      
      
                return window.getComputedStyle(element);
            }else{
      
      
                return element.currentStyle;
            }
        }
    </script>
</body>
</html>

设置内联样式

例：

<!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>
</head>
<body>
    <div
      id="d1"
      style="width: 200px; height: 200px; border: 1px solid grey"
    ></div>
    <script>
        //利用属性操作的方式
        var div=document.getElementById('d1');
        div.setAttribute('style','width:300px;height:300px;border:1px solid black;');

        //利用HTMLElement对象的style属性
        var div=document.getElementById('d1');
        var style=div.style;
        style.width='500px';
        style.height='500px';
        //DOM不允许重写DOM中的对象
        // style={
      
      
        //     height:'500px',
        //     width:'500px'
        // }
    </script>
</body>
</html>

设置class属性

<!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>
    <style>
        .d1{
      
      
            width: 200px;
            height: 200px;
            background-color: grey;
        }
        .d2{
      
      
            font-family: '楷体';
            color: lightcoral;
        }
        .one{
      
      
            width: 100px;
            height: 100px;
            background-color: rgb(152, 143, 66);
        }
    </style>
</head>
<body>
    <div class="d1 d2" id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed similique possimus cumque explicabo sint soluta debitis corporis dignissimos aut doloribus, adipisci iure consequatur nam nobis aspernatur eum tempore nemo culpa.</div>
    <script>
        
        var div=document.getElementById('d1');
        //DOM中某个对象提供了className属性 -> 得到class属性的值
        var className=div.className;
        console.log(className);

        // div.className='one';
        
        var attr=div.getAttribute('class');
        console.log(attr);

        // div.setAttribute('class','one');

        //classList属性（浏览器兼容问题) - 获取多个类选择器叠加的用法
        var classList=div.classList;
        console.log(classList);
    </script>
</body>
</html>

Element对象的样式属性

元素内部的宽度和高度

Element对象的clientWidth和clientHeight属性表示元素内部的宽度和高度，单位为像素。这些属性的值包含内边距，但不包含滚动条、边框和外边距。

W2whyF.png

例：

<!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>
    <style>
        #d1{
      
      
            width: 200px;
            height: 200px;
            border: 10px solid black;
            padding: 50px;
            
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <script>
        var div=document.getElementById('d1');
        //只能获取，不能设置-> 内容区+内边距
        console.log(div.clientWidth,div.clientHeight);
    </script>
</body>
</html>

内容区的宽度和高度

Element对象的scrollWidth属性表示元素内容的宽度，单位为像素。scrollWidth属性返回元素内容区的宽度和元素本身宽度中更大的那个值。

W22kpd.png

例：

<!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>
    <style>
        #parent{
      
      
            width: 200px;
            height: 200px;
            border: 10px solid black;
            overflow: auto;
        }
        #children{
      
      
            width: 400px;
            height: 400px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="children"></div>
    </div>
    <script>
        var parent=document.getElementById('parent');
        console.log(parent.scrollWidth,parent.scrollHeight);
    </script>
</body>
</html>

滚动条滚动的宽度和高度

Element对象的scrollLeft属性表示滚动条到元素左边的距离，单位为像素。scrollLeft属性的默认值为0.

WWrVmT.png

例：

<!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>
    <style>
        #parent{
      
      
            width: 200px;
            height: 200px;
            border: 10px solid black;
            overflow: auto;
        }
        #children{
      
      
            width: 400px;
            height: 400px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="children"></div>
    </div>
    <script>
        var parent=document.getElementById('parent');
        /*
         滚动条滚动事件
         *onwheel事件
         *onmousewheel事件
         *oncroll事件
        */
       parent.onscroll=function(){
      
      
           console.log(parent.scrollLeft,parent.scrollTop);
       }
        
    </script>
</body>
</html>

判断元素内容是否滚动到底

如果元素内容滚动到底的话，如下等式返回的结果为true，否则返回为false。

element.scrollHeight-element.scrollTop===element.clientHeight

WWxHld.png

例：

<!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>
    <style>
        #parent{
      
      
            width: 400px;
            height: 600px;
            border: 10px solid black;
            overflow: auto;
        }
        #child{
      
      
            width: 370px;
            height: 1000px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed vel reiciendis minus tenetur fuga sapiente cumque voluptas veniam similique dolor error laborum autem eius, maxime quo? Eos rem fugit totam.</div>
    </div>
    <script>
        var parent=document.getElementById('parent');
        parent.onscroll=function(){
      
      
            // 用于判断滚动条是否滚动到底部
            // parent.clientHeight + parent.scrollTop===parent.scrollHeight
            console.log(parent.clientHeight,parent.scrollHeight,parent.scrollTop)
        }
    </script>
</body>
</html>

元素内部的宽度和高度

Element对象的clientWidth和clientHeight属性表示元素内部的宽度和高度，单位为像素。这些属性的值包含内边距，但不包含滚动条、边框和外边距。

4D0fvn.png

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEwqS4Oj-1636450629092)(https://z3.ax1x.com/2021/09/26/46ffqf.png)]

例：

<!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>
    <style>
        body {
      
      
            padding: 0;
            margin: 0;
            height: 1200px;
        }
        
        img {
      
      
            width: 300px;
            position: absolute;
            left: 400px;
            top: 300px;
        }
    </style>
</head>

<body>
    <img src="psc.jpg" alt="">
    <script>
        //  DOM中表示为当前HTML页面
        //  *document对象 - 有效
        //  *<html>元素
        //  *<body>元素 - 有效

        var html = document.documentElement;
        var body = document.body;

        var img = document.getElementsByTagName('img')[0];
        var style = window.getComputedStyle(img);
        var imgTop = parseInt(style.top);

        body.onscroll = function() {
      
      
            // console.log(html.scrollTop, imgTop);

            if (html.scrollTop >= imgTop) {
      
      
                img.style.position = 'fixed';
                img.style.top = 0;
            } else {
      
      
                // img.style.position = 'absolute';
                // img.style.top = 0;
                img.removeAttribute('style');
            }
        }
    </script>
</body>

</html>

获取指定元素的定位父元素

Element对象提供的offsetParent属性用于返回一个指向最近的包含该元素的定位元素。

var parentObj=element.offsetParent;
  • 作为返回值的parentObj表示一个指向最近的包含该元素的定位元素。

注意：如果该祖先元素中没有开始定位，则offsetParent为body元素。

<style>
    #parent{
      
      position:relative;}
</style>
<script>
    var btn=document.getElementById('btn');
    console.log(btn.offsetParent);
</script>

例：

<!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>
    <style>
        #parent {
      
      
            position: relative;
        }
        
        #child {
      
      
            position: relative;
        }
        
        #d1 {
      
      
            width: 100px;
            height: 100px;
            background-color: beige;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="child">
            <div id="d1"></div>
        </div>
    </div>
    <script>
        var d1 = document.getElementById('d1');
        // 1.如果当前元素的所有祖先元素都没有开启定位的话 - <body>元素
        // 2.如果当前元素的所有祖先元素中，只能一个开启定位的话 - 开启定位的祖先元素
        // 3.如果当前元素的所有祖先元素中，具有多个开启定位的话 - 距离当前元素最近的那个祖先元素
        console.log(d1.offsetParent);
    </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/weixin_52102646/article/details/121233105
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022