【JS】JS获取、查看、控制CSS样式

最新推荐文章于 2023-05-10 01:09:09 发布

·慈悲为怀·

最新推荐文章于 2023-05-10 01:09:09 发布

阅读量316

点赞数

文章标签： css javascript css3 前端 html

本文链接：https://blog.csdn.net/weixin_64615992/article/details/123469162

版权

`js控制css`

`元素.style.属性='属性值';`

可以获取属性值，也可以添加、修改属性值

注意

有属性名为连字符命名的要改为驼峰命名
- 例：元素.style.backgroundColor
style访问的是元素的内嵌样式，所以这样设置的css优先级很高
- 不能获取除内嵌样式之外的样式的值

`document.styleSheets`

获取所有的样式表的集合
仅head中写入的style，不含外接样式表
- 获取StyleSheetList 有多少CSSStyleSheet即多长，使用数组下标的形式访问CSSStyleSheet

属性

1.`样式表.cssRules`

获取样式规则的集合

style大体中设置多少个属性，长度就为多少（长度即为每个代码块的数量
.style.属性访问样式表的属性（可以设置、修改样式
- 修改的是样式表，优先级小于内嵌样式

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    
    <!-- document.styleSheets;长度为2 -->
    
    <!-- document.styleSheets[0];获取该CSSStyleSheet -->
    <style type="text/css"> 
        table {
            background-color: aquamarine;
        }
    </style>
    
    <!-- document.styleSheets[1]; 获取该CSSStyleSheet-->
    <style type="text/css">
        // document.styleSheets[1].cssRules; 长度为2
        
        body {
            background-color: rgb(200, 218, 255);
        }
        td {
            background-color: blanchedalmond;
        }

    </style>
    
</head>