【前端系列教程之JavaScript】11_DOM编程详解_操作CSS样式

我是波哩个波

已于 2022-03-10 16:06:26 修改

阅读量469

点赞数

分类专栏： # JavaScript从入门到精通文章标签： javascript 前端开发语言 JS ecmascript

于 2021-12-28 12:36:59 首次发布

本文链接：https://blog.csdn.net/ligonglanyuan/article/details/122190407

版权

JavaScript从入门到精通专栏收录该内容

16 篇文章 3 订阅

订阅专栏

JavaScript操作CSS样式

使用style操作样式(重点)

使用规则

任何HTML元素标签都会有一个通用的属性：style,它会返回CSSStyleDeclaration对象。其语法格式为HTML元素.style.样式属性＝"值"。但是需要注意的是，JavaScript样式属性的写法和CSS写法有点不同，比如字体的大小，CSS代码为font-size,而JavaScript的代码为fontSize。

以下两张表格都是JavaScript写样式属性的，注意和CSS代码的区别。

注意:通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

简单动画案例

效果1:点击改变div的颜色,再次点击返回原样:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: yellow;
        }
    </style>
</head>

<body>
    <div id="div1">

    </div>
    <script>
        // 获取div1元素节点
        var div1 = document.getElementById("div1");

        var flag = 1; // 如果是1的时候,代表的黄色,要变为红色
        div1.onclick = function () {
            if (flag === 1) {
                div1.style.background = "red";
                flag = 2; //改变flag的值
            } else {
                div1.style.background = "yellow";
                flag = 1; //改变flag的值
            }
        }
    </script>
</body>

</html>

效果2:鼠标移入列表改变背景图片,移出恢复原样:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        li {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            font-size: 12px;
            color: blue;
        }

        li {
            display: inline-block;
            width: 87px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            user-select: none;
            cursor: pointer;
            background: url("images/5.png");
        }

        /* li:hover {
            background: url("images/3.png");
        } */
    </style>
</head>

<body>
    <ul id="ul1">
        <li>首 页</li>
        <li>水果生鲜</li>
        <li>牛奶饮品</li>
        <li>帮助中心</li>
        <li>关于我们</li>
    </ul>
    <script>
        var ul1 = document.getElementById("ul1");
        ul1.onmouseover = function (e) {
            e = e || window.event;
            var target = e.target || e.srcElement;

            if (target.nodeName.toLowerCase() === 'li') {
                console.log("点击了" + target.innerHTML); // target就是元素节点
                // console.log(target.style); // CSSStyleDeclaration
                // css样式写的是什么值,现在通过js来进行操作的也应是什么值
                target.style.background = 'url("images/3.png")';
            }
        }

        ul1.onmouseout = function (e) {
            e = e || window.event;
            var target = e.target || e.srcElement;

            if (target.nodeName.toLowerCase() === 'li') {
                console.log("点击了" + target.innerHTML); // target就是元素节点
                // console.log(target.style); // CSSStyleDeclaration
                // css样式写的是什么值,现在通过js来进行操作的也应是什么值
                target.style.background = 'url("images/5.png")';
            }
        }
    </script>
</body>

</html>

CSSStypeDeclaration的属性和方法

正如上面提到的，HTML元素.style返回的是返回CSSStypeDeclaration对象，该对象中定义了一些属性和方法，可以在JavaScript中操作HTML元素的样式。

属性或方法	说明
cssText	访问或设置CSS 代码
length	获取样式属性的数量
getPropertyValue(name)	返回包含给定属性值的CSSValue 对象
item(index)	返回指定位置CSS 属性名称
removeProperty(name)	从样式中删除指定属性
setProperty(name,v)	给属性设置为相应的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>

    <div id="div1" style="font-size: 12px;color:green;border: 1px solid black;">
        我是div的文本内容
    </div>

    <script>
        // 获取得到div1元素节点
        var div1 = document.getElementById("div1");

        // 元素节点.style   ->CSSStyleDeclaration
        console.log(div1.style);

        var cssStyleDec = div1.style;

        // cssText      访问或设置CSS 代码
        // 获取得到行内样式
        console.log("cssText代码:" + cssStyleDec.cssText);

        // 三次dom操作
        // cssStyleDec.fontSize = "20px";
        // cssStyleDec.color = "hotpink";
        // cssStyleDec.border = "3px solid blue";


        // 结合今天上午讲的内容,好好想一下? 
        // cssStyleDec.cssText = "font-size: 20px;color:hotpink;border: 1px solid blue;";

        // 一次性设置多个样式,可以怎么办? 通过className属性替换类

        // 获取样式属性的数量
        // console.log("样式属性的数量:" + cssStyleDec.length)

        // getPropertyValue(name)   返回包含给定属性值的CSSValue 对象
        console.log("div1的字体颜色:" + cssStyleDec.getPropertyValue("color"));
        console.log("div1的字体颜色:" + cssStyleDec.color);

        // 两者都是可以获取到行内样式的值,但是第一种方式对于-分割的样式,必须去除中划线,中划线后面的首字母大小
        console.log("div1的字体颜色:" + cssStyleDec.fontSize);
        // 第二种方式,可以使用css样式属性名
        console.log("div1的字体大小:" + cssStyleDec.getPropertyValue("font-size"));

        // item(index) 返回指定位置CSS 属性名称
        console.log("-------------------------------");
        for (var i = 0; i < cssStyleDec.length; i++) {
            console.log(cssStyleDec[i]);
        }

        // removeProperty(name) 从样式中删除指定属性
        cssStyleDec.removeProperty("color");


        cssStyleDec.setProperty("color", "skyblue");

        cssStyleDec.color = "red";
    </script>
</body>

</html>

使用className访问样式

除了使用HTML元素.style.样式属性＝"值"来访问元素的样式外，这种方法只能对元素的样式一个一个的访问，如果样式设置比较多，就比较繁琐。还可以使用HTML元素.className=’类样式名’来设置元素的样式，这时可以把多个样式写在同一个类样式中。

案例: 用className实现菜单制作:

实现思路： 1、设置每一个li标签的初始状态。 2、设置两个样式over和out，表示鼠标移至菜单和移出菜单的效果。 3、统一为每一个li标签设置onmouseover事件和onmouseout事件效果

操作内部或外部CSS样式(了解)

之前我们使用style 属性，仅仅只能获取和设置行内的样式，如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了，CSSStyleSheet 类型表示通过<link>元素和<style>元素包含的样式表。

1、通过代码document.getElementsByTagName('link')[0]; 获取一个HTMLLinkElement对象;

2、通过document.getElementsByTagName('style')[0];获取一个HTMLStyleElement。

这两个元素本身返回的是HTMLLinkElement 和HTMLStyleElement 类型，但CSSStyleSheet 类型更加通用一些。

3、通过sheet属性,可以把 HTMLLinkElement 和 HTMLStyleElement 对象转换为CSSStyleSheet 类型

常见CSSStyleSheet属性和方法:

属性或方法	说明
disabled	获取和设置样式表是否被禁用
cssRules	样式表包含样式规则的集合
deleteRule(index)	删除cssRules 集合中指定位置的规则
insertRule(rule, index)	向cssRules 集合中指定位置插入rule 字符串，IE也可以用addRule(选择器名, 属性名:属性值, 索引)

var img1=document.getElementById("img");

var link = document.getElementsByTagName('link')[0];

var sheet = link.sheet || link.styleSheet; //得到CSSStyleSheet

sheet.insertRule("body {background-color:red}", 2);

link.sheet.deleteRule(2);

通过CSSRules 属性，我们可以获得样式表的规则集合列表。这样我们就可以对每个样式进行具体的操作了。

通过cssRules[下标值]可以获取一个CSSStyleRule对象，通过访问CSSStyleRule对象来操作样式。

CSSStyleRule常用属性:

属性	说明
cssText	获取当前整条规则对应的文本，IE 不支持
selectorText	获取当前规则的选择符文本
style	返回CSSStyleDeclaration 对象，可以获取和设置样式

rule.cssText; //当前规则的样式文本
rule.selectorText; //#box，样式的选择符
rule.style.color; //red，得到具体样式值

通过计算属性操作样式

//精准操作内部和外部css样式 [这种方式就是获取到作用域元素的样式,然后再去操作]

//1. 获取到要操作样式的元素节点
var div1 = document.getElementById("div1"); //获取到div1元素节点

//2. 获取到作用与div1的所有样式 CSSStyleDecalaration
var div1Style = getComputedStyle(div1);   //window.getComputedStyle(元素节点)   获取到作用于这个元素节点的样式    
            
//只能获取到作用于元素的样式
document.write("div1的宽:"+div1Style.width+"<br>");
document.write("div1的字体大小:"+div1Style.fontSize+"<br>");

 // div1Style.width = "500px";

案例

设置div的大小和位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .cls {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 100px;
      left: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <input type="button" value=" 点我 " id="btn">
  <br>
  <div id="box"></div>
  <script>
  	 btn.onclick = function () {
      // 改变box的大小和位置
      // 使用class
      // box.className = 'cls';
      // 
      // 使用style  设置大小和位置的时候 数字必须带单位
      box.style.width = '200px';
      box.style.height = '200px';

      box.style.position = 'absolute';
      box.style.left = '200px';
      box.style.top = '200px';

      console.log(box.style);
    }

  </script>
</body>
</html>

div显示或隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <input type="button" value=" 点我 " id="btn">
    <br>
    <div id="box"></div>
    <script>
        // 获取得到页面元素节点
        var btn = document.getElementById("btn");
        var box = document.getElementById("box");
        var flag = 1;
        var boxHeight = 200;
        var boxOpacity = 1;

        // 隐藏的时候: 高度逐渐变为0,并且透明度变为0
        // 1500ms
        btn.onclick = function () {
            if (flag === 1) { // 隐藏
                // box.style.display = "none";
                var interId = setInterval(function () {
                    // 不能使用boxHeight / 30
                    boxHeight = boxHeight - 200 / 30;
                    boxOpacity = boxOpacity - 1 / 30;
                    box.style.height = boxHeight + "px";
                    box.style.opacity = boxOpacity;
                    if (boxHeight <= 0 || boxOpacity <= 0) {
                        box.style.opacity = 0;
                        box.style.height = "0px";

                        clearInterval(interId);
                    }
                }, 10)
                flag = 2;
            } else { // 显示
                // box.style.display = "block";
                var interId = setInterval(function () {
                    // 不能使用boxHeight / 30
                    boxHeight = boxHeight + 200 / 30;
                    boxOpacity = boxOpacity + 1 / 30;
                    box.style.height = boxHeight + "px";
                    box.style.opacity = boxOpacity;
                    if (boxHeight >= 200 || boxOpacity >= 1) {
                        box.style.opacity = 1;
                        box.style.height = "200px";

                        clearInterval(interId);
                    }
                }, 10)
                flag = 1;
            }
        }
    </script>
</body>

</html>

点击菜单项切换选中状态

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #menu ul li {
      list-style-type: none;
      line-height: 30px;
      background-color: beige;
      text-align: center;
      float: left;
      margin-left: 5px;
    }

    #menu ul li.current {
      background-color: burlywood;
    }

    #menu ul li a {
      display: inline-block;
      width: 80px;
      height: 30px;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div id="menu">
    <ul>
      <li class="current"><a href="javascript:void(0)">首页</a></li>
      <!--<li><a href="javascript:undefined">博客</a></li>-->
      <li><a href="javascript:void(0)">博客</a></li>
      <li><a href="javascript:void(0)">相册</a></li>
      <li><a href="javascript:void(0)">关于</a></li>
      <li><a href="javascript:void(0)">帮助</a></li>
    </ul>
  </div>

  <script>
    // void 是运算符   
    // 执行void后面的表达式，并始终返回undefined

    var menu = document.getElementById("menu");
    // 获取menu中的ul
    var ul = menu.firstElementChild;

    for (var i = 0; i < ul.children.length; i++) {
      var li = ul.children[i];
      // 获取li中的a标签
      var link = li.firstElementChild;
      // 注意：此时是把函数赋给onclick 而不是函数的调用
      link.onclick = linkClick;
    }

    function linkClick() {
      // 所有的li取消高亮显示 
      for (var i = 0; i < ul.children.length; i++) {
        var li = ul.children[i];
        li.className = '';
      }

      // 让当前a标签所在的li高亮显示
      // 
      // this是当前点击的a标签对应的元素
      this.parentNode.className = 'current';

      // 取消后续内容的执行
      return false;
    }
  </script>
</body>

</html>

动态生成列表

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <input type="button" value="按钮" id="btn">
  <div id="box"></div>

  <script>
    var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];

    var box = document.getElementById("box");
    // 点击按钮 动态创建列表，鼠标放上高亮显示
    var btn = document.getElementById("btn");

    btn.onclick = function () {
      // 动态创建ul，内存中创建对象
      var ul = document.createElement('ul');
      // 把ul 放到页面上    把ul放到DOM树上，并且会重新绘制
      box.appendChild(ul);

      for (var i = 0; i < datas.length; i++) {
        var data = datas[i];
        // 在内存中动态创建li
        var li = document.createElement('li');
        // 把li添加到DOM树，并且会重新绘制
        ul.appendChild(li);
        // 设置li中显示的内容
        // li.innerText = data;
        setInnerText(li, data);

        // 给li注册事件
        li.onmouseover = liMouseOver;
        li.onmouseout = liMouseOut;
      }
    }
    // 当鼠标经过li的时候执行
    function liMouseOver() {
      // 鼠标经过高亮显示
      this.style.backgroundColor = 'red';
    }

    function liMouseOut() {
      // 鼠标离开取消高亮显示
      this.style.backgroundColor = '';
    }

    // 设置标签之间的内容
    function setInnerText(element, content) {
      // 判断当前浏览器是否支持 innerText
      if (typeof element.innerText === 'string') {
        element.innerText = content;
      } else {
        element.textContent = content;
      }
    }
  </script>
</body>

</html>