js - 操作元素样式

不想掉头发的小猴子

已于 2022-11-10 19:55:41 修改

阅读量109

点赞数

文章标签： javascript 前端 html

于 2022-11-08 11:39:08 首次发布

本文链接：https://blog.csdn.net/weixin_57135131/article/details/127747750

版权

操作元素样式

<!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="box"></div>
    <script>
        /**
         * 操作元素样式
         *  - 行内样式
         *      -语法： 元素.style.属性
         *      - CSS属性中有"-",在JS中使用时
         *        1. 使用小驼峰命名的写法
         *        2. 使用字符串的方式，结合对象访问属性时使用[]
         *  - 非行内样式
         *      -语法： getComputeStyle(元素).属性  //标准浏览器支持
         *              元素.currentStyle.属性  //IE浏览器
         *              兼容写法
         */

        //操作页面中的div，先获取
        var o_box = document.querySelector("#box");

        //操作元素行内样式的属性
        o_box.style.width = "100px";
        o_box.style.height = "100px";        
        o_box.style.backgroundColor = "yellow";
        o_box.style[background-color] = "red";
        
        //操作非行内样式的属性
        var width = getComputedStyle(o_div).width;  //标准浏览器支持
        var width = o_div.currentStyle.width;  //IE浏览器
        //兼容
        function getStyle(obj,attr){ //obj: 某个节点对象  attr : 属性
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            //return window.getComputedStyle ? getComputeStyle(obj,1)[attr] : obj.currenStyle[attr];
        }
    </script>
</body>
</html>

操作元素类名

<div id="box" class=""></div>
    <script>
        /*
            操作元素类名
             - 元素.className :元素的类名

             - 元素.classList :元素的全部类名
             - 元素.classList.length :元素类名的数量
            增、删、改
             - 元素.classList.add() :向元素添加一个或者多个类名
             - 元素.classList.remove() :删除元素一个或者多个类名
             - 元素.classList.toggle() :为元素切换类名（有则删除，没有添加）
            查
             - 元素.classList.item(index) :获取到元素类名索引为index的类名
             - 元素.classList.contains(x) : 查看元素是否存在类名为"x"的类
        */

        var o_div = document.querySelector("#box");
        //o_div.class = 'pox'; //class : 是保留字，不能直接使用
        o_div.className = 'pox1';
        o_div.className += ' pox2';

        o_div.classList.add('pox3','pox4');
        o_div.classList.remove('pox3');
        console.log(o_div.classList.item(2));
        console.log(o_div.classList.contains("p"));
        console.log(o_div.classList.length);
        console.log(o_div.classList);
    </script>


    <!-- 案例：灯的开关 -->
    <input type="button" value="开关">
    <div id="linght"></div>
    <script>
        var o_onoff = document.querySelector("input");
        var o_linght = document.querySelector("#linght");
        o_onoff.onclick = function(){
            o_linght.classList.toggle(".action");
        }
    </script>

操作元素属性

<!-- 
        操作元素属性
        - 原生属性
            元素.属性
            元素['属性']
        - 自定义属性 操作
            元素.getAttribute("属性名") :获取属性
            元素.setAttribute("属性名","属性值") :设置属性
            元素.removeAttribute("属性名") :* > 删除属性
        - H5自定义属性 操作
            元素.dataset
            自定义属性的元素以 data- 开头
     -->
     <div id="box" class="pox" title="tt" hehe="he" data-my-id="pp"></div>
     <script>
        var o_div = document.querySelector("#box");
        //原生属性
        console.log(o_div.id,o_div.className,o_div.title,o_div.hehe)//box pox tt undefined
        //o_div.hehe 不是原生属性
        
        //自定义属性
        console.log(o_div.getAttribute("hehe"));
        o_div.setAttribute("haha","ha");
        o_div.removeAttribute("hehe");

        //H5自定义属性
        console.log(o_div.dataset.myId);//data-my-id="pp"
        o_div.dataset.ad = "bb";//data-ad = "bb"
     </script>

操作元素内容

<!-- 
        操作元素内容
         - innerHTML : 设置或获取当前节点内容的内容（超文本）（可以解析超文本的含义）
         - innerText : 设置或获取当前节点内部的内容（纯文本）（不能解析超文本）
         - value : 设置或获取表单中的内容
     -->